标签：
参考地址：http://www.zhangxinxu.com/wordpress/2011/09/%E5%9F%BA%E4%BA%8Ehtml5%E7%9A%84%E5%8F%AF%E9%A2%84%E8%A7%88%E5%A4%9A%E5%9B%BE%E7%89%87ajax%E4%B8%8A%E4%BC%A0/
1 <!doctype html> 2 <html> 3 <head lang="zh-CN"> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <style> 7 *{margin: 0;padding :0;} 8 .wrap{ 9 width: 300px; 10 margin: 100px auto; 11 } 12 .pic{ 13 display: inline-block; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="wrap"> 19 <form id="uploadForm" method="post" enctype="multipart/form-data"> 20 <label>图片：</label><input type="file" id="choose_file" multiple> 21 <br> 22 <div class="show" id="show"> 23 24 </div> 25 <br> 26 <progress id="uploadprogress" min="0" max="100" value="0">0</progress> 27 <br> 28 <br> 29 <input id="upload" type="button" value="上传图片"/><br><br> 30 </form> 31 </div> 32 <script src="JS/jquery-2.1.1.min.js"></script> 33 <script> 34 $(function(){ 35 if(typeof FileReader === ‘undefined‘){ 36 $("body").html("抱歉，你的浏览器不支持 FileReader"); 37 $("input").attr(‘disabled‘, ‘disabled‘); 38 } 39 else{ 40 $("#choose_file").on("change", showPic); 41 $("#upload").on("click", uploadPic); 42 } 43 }); 44 45 //预览图片 46 function showPic(){ 47 //console.log(this.files[0]); 48 $("#show").html("");//清空图片 49 var html = ‘‘; 50 for (var i = 0, file; file = this.files[i]; i++) { 51 if(!/image\/\w+/.test(file.type)){ 52 alert("请确保文件为图像类型"); 53 } 54 else{ 55 //console.log(file.name); 56 lookPic(file.name); 57 } 58 } 59 function lookPic(name){ 60 var reader = new FileReader();//html5新对象接口 61 reader.readAsDataURL(file);//将文件读取为DataURL 62 reader.onload = function(e) { 63 html = ‘<div class="pic"><p><strong>‘ + name + ‘</strong>‘+ ‘<br />‘ + 64 ‘<img id="uploadImage_‘ + i + ‘" src="‘ + e.target.result + ‘" /></p>‘ + 65 ‘</div>‘; 66 $("#show").append(html); 67 } 68 } 69 70 } 71 //上传图片 72 function uploadPic(){ 73 if (window.FormData) { 74 var files = document.getElementById("choose_file").files; 75 //console.log(files); 76 var formData = new FormData(); //FormData对象 77 for (var i = 0; i < files.length; i++) { 78 formData.append("files", files[i]); 79 } 80 //jQuery版 81 $.ajax({ 82 url: "Default.aspx?Action=images", 83 type: "POST", 84 data: formData, 85 dataType: "json", 86 processData: false, // 告诉jQuery不要去处理发送的数据 87 contentType: false, // 告诉jQuery不要去设置Content-Type请求头 88 success: function(data) { 89 alert("上传成功！"); 90 }, 91 error: function(errorMsg) { 92 alert("请求数据失败！"); 93 } 94 }); 95 //原生js ajax2 96 var xhr = new XMLHttpRequest(); 97 xhr.onreadystatechange = function() { 98 if (xhr.readyState == 4) { 99 if (xhr.status == 200) { 100 alert("上传成功！"); 101 } 102 else { 103 alert("上传失败！"); 104 } 105 } 106 } 107 108 //侦查当前附件上传情况 109 xhr.upload.onprogress = function(evt) { 110 //侦查附件上传情况 111 //通过事件对象侦查 112 //该匿名函数表达式大概0.05-0.1秒执行一次 113 //console.log(evt); 114 //console.log(evt.loaded); //已经上传大小情况 115 //evt.total; 附件总大小 116 var loaded = evt.loaded; 117 var tot = evt.total; 118 var per = Math.floor(100 * loaded / tot); //已经上传的百分比 119 var uploadprogress = document.getElementById("uploadprogress"); 120 uploadprogress.value = per; 121 uploadprogress.innerHTML = per; 122 } 123 xhr.open("post", "Default.aspx?Action=images"); 124 //xhr.setRequestHeader("X_FILENAME", files[i].name); 125 xhr.send(formData); 126 } 127 } 128 </script> 129 </body> 130 </html>
标签：
原文地址：http://www.cnblogs.com/gyx19930120/p/4802743.html
