简单的做一个图片上传预览(web前端)

简介: 简单的做一个图片上传预览(web前端)

在做web项目很多的时候图片都是避免不了的,所以操作图片就成了一个相对比较棘手的问题,其实也不是说很麻烦,只是说上传然后直接预览的过程很恶心,今天简单的做一个处理。

效果预览:

代码:

<!DOCTYPE html>  
<html>  
<head>  
<title>HTML5上传图片预览</title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>  
</head>  
<body>  
<h3>请选择图片文件:JPG/GIF</h3>  
<form name="form0" id="form0">  
<input type="file" name="file0" id="file0" multiple="multiple" /><br>  
    <img src="" id="img0" style="width: 20rem;height: 15rem;">
</form>  
<script>   
$("#file0").change(function(){  
     var objUrl = getObjectURL(this.files[0]) ;//获取文件信息  
     console.log("objUrl = "+objUrl);  
      if (objUrl) {  
      $("#img0").attr("src", objUrl);  
     }   
}) ;  
function getObjectURL(file) {  
     var url = null;   
     if (window.createObjectURL!=undefined) {  
      url = window.createObjectURL(file) ;  
     } else if (window.URL!=undefined) { // mozilla(firefox)  
      url = window.URL.createObjectURL(file) ;  
     } else if (window.webkitURL!=undefined) { // webkit or chrome  
      url = window.webkitURL.createObjectURL(file) ;  
     }  
     return url ;  
    }  
    </script>  
</body>  
</html>  

相关文章
|
11天前
|
前端开发 搜索推荐 JavaScript
Web前端网站(二)- 主页
页面星空是可动的哦~~~毒药水特效的颜色搭配,文字渐变的动态效果,图片360度旋转展示特效等等等;每一次的按钮点击都是满满的惊艳 ~ ~ ~
21 4
Web前端网站(二)- 主页
|
11天前
|
存储 前端开发 搜索推荐
Web前端网站(一) - 登录页面及账号密码验证
页面背景动态是烟花和文字特效与缓缓下落的雪花相结合,在登录表单的旁边还有五个白色光圈以不规则的方式环绕,当鼠标靠近时,会发出彩色的光芒~~~
29 1
Web前端网站(一) - 登录页面及账号密码验证
|
9天前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
|
6天前
|
JSON 前端开发 Java
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
21 6
|
8天前
|
缓存 前端开发 安全
探索现代Web开发中的前端架构模式
【6月更文挑战第23天】随着互联网技术的飞速发展,前端架构在Web开发中扮演着越来越重要的角色。本文将深入探讨现代Web开发中使用的几种主流前端架构模式,包括单页面应用(SPA)、微前端架构和JAMStack等,并分析它们的优势与应用场景。通过实例演示,我们将看到如何根据项目需求选择合适的前端架构,以及如何利用这些架构模式提升开发效率和应用性能。
|
2天前
|
前端开发 JavaScript 开发者
现代前端开发中的Web组件化设计
随着Web应用程序复杂性的增加,现代前端开发越来越倾向于采用组件化设计。本文将探讨Web组件化的定义、优势以及实际应用中的最佳实践,帮助开发者更好地理解和应用这一技术。
|
4天前
|
前端开发 计算机视觉
视觉智能开放平台操作报错合集之人脸对比1:1,采用web前端直接调用,使用了base64处理图片,提示http错误码414,该如何处理
在使用视觉智能开放平台时,可能会遇到各种错误和问题。虽然具体的错误代码和消息会因平台而异,但以下是一些常见错误类型及其可能的原因和解决策略的概述,包括但不限于:1. 认证错误、2. 请求参数错误、3. 资源超限、4. 图像质量问题、5. 服务不可用、6. 模型不支持的场景、7. 网络连接问题,这有助于快速定位和解决问题。
|
5天前
|
前端开发 程序员 API
视觉智能开放平台产品使用合集之web前端拉起人脸识别该如何操作
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
|
6天前
|
移动开发 前端开发 JavaScript
快速上手web前端开发(超详细教程)
快速上手web前端开发(超详细教程)
|
8天前
|
前端开发 JavaScript
web开发前端适配
web开发前端适配
10 0