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.js-code.COM/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>
     

到此这篇关于html5以及jQuery实现本地图片上传前的预览代码实例讲解的文章就介绍到这了,更多相关html5以及jQuery实现本地图片上传前的预览内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• 去除HTML标签删除HTML示例代码
• 利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）
• html+css+js实现canvas跟随鼠标的小圆特效源码
• js+html+css实现手动轮播和自动轮播
• 在HTML中使用JavaScript的两种方法
• 如何学习html的各种标签

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！