参考地址：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>
时间： 2024-10-04 18:55:03