html5以及jQuery实现本地图片上传前的预览代码实例讲解-偶像资源网

html5以及jQuery实现本地图片上传前的预览，效果类似如下：
选择图片前的页面：

选择图片之后的预览效果：

下面直接上代码（只是最简单的实现代码，css样式没有复制，自己随意发挥）

<!DOCTYPE html> 
<html> 
<head> 
<title>HTML5上传图片预览</title> 
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"> 
<script src=\"https://www.jb51.net/ajaxjs/jquery-1.6.2.min.js\"></script> 
</head> 
<body> 

 ...

 <form name=\"form0\" id=\"form0\" > 
 <!-- 这里特别说一下这个 multiple=\"multiple\" 添加上这个之后可以一次选择多个文件进行上传，是 html5 的新属性--> 
 <input type=\"file\" name=\"file0\" id=\"file0\" multiple=\"multiple\" /><br><img src=\"\" id=\"img0\" > 
 </form> 

 ...

<script> 
 $(\"#file0\").change(function(){ 
  // getObjectURL是自定义的函数，见下面 
  // this.files[0]代表的是选择的文件资源的第一个，因为上面写了 multiple=\"multiple\" 就表示上传文件可能不止一个 
  // ，但是这里只读取第一个 
  var objUrl = getObjectURL(this.files[0]) ; 
  // 这句代码没什么作用，删掉也可以 
  // console.log(\"objUrl = \"+objUrl) ; 
  if (objUrl) { 
  // 在这里修改图片的地址属性 
  $(\"#img0\").attr(\"src\", objUrl) ; 
  } 
 }) ; 
 //建立一個可存取到該file的url 
 function getObjectURL(file) { 
  var url = null ; 
  // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已 
  if (window.createObjectURL!=undefined) { // basic 
  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>

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

html5以及jQuery实现本地图片上传前的预览代码实例讲解

请登录后发表评论