上传图片且可以预览

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>上传图片</title>
 6         <script type="text/javascript" src="lib/jquery-1.11.0.js" ></script>
 7         <script type="text/javascript" src="JS/jupload.js"></script>
 8         <script type="text/javascript" src="JS/browser-md5-file.min.js" ></script>
 9     </head>
10     <body>
11         图片上传：<input type="file" id="pic" name="pic" multiple="multiple"  accept="image/*" />
12         <ul>
13         </ul>
14     </body>
15 </html>

js代码

一张图片的MD5是唯一的，可以根据MD5值来让同一张照片只可以上传一次

 1 $(document).ready(function(){
 2     $("#pic").on("change",function(e){
 3         var files = e.target.files;//事件的目标控件.属性
 4         var url = window.URL || window.wibkitURL || window.mozURL;//
 5         /*for（var i=0 len=files.length;i<len; ++i ）*/
 6         $.each(files,function(i,o){//i是循坏次数，o是指具体的图片
 7             var lian = url.createObjectURL(o);//得到图片的链接
 8             browserMD5File(o, function (err, md5) {
 9                console.log(md5);
10             });
11             var li = "<li class='lis'><img class='uppic' src='" + lian + "'/></li>"
12             $("ul").append(li);
13             $(".lis").css("list-style-type","none").css("display","inline-block").css("margin-right","10px");
14             $(".uppic").css("width","150px").css("height","100px");
15         });
16     });
17 });