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 });