图片预览
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <script src="/static/jquery.min.js"></script> 7 </head> 8 <body> 9 <!-- accept属性可以指定文件输入框选择的文件类型 --> 10 <input type="file" id="img_checker" accept="image/*"> 11 <input type="button" onclick="upload()" value="上传"> 12 <hr> 13 <img src="" id="show_img"> 14 <script> 15 //给文件输入框绑定事件 16 document.getElementById('img_checker').onchange = function () { 17 var fileReader = new FileReader(); 18 //读取文件输入框已选择的文件 19 fileReader.readAsDataURL(this.files[0]); 20 //注册文件加载完毕之后的时间 21 fileReader.onload = function () { 22 //让img标签的src属性指向读取的文件 23 document.getElementById('show_img').src = fileReader.result; 24 } 25 } 26 </script> 27 </body> 28 </html>
Ajax文件上传
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <script src="/static/jquery.min.js"></script> 7 </head> 8 <body> 9 <!-- accept属性可以指定文件输入框选择的文件类型 --> 10 <input type="file" id="img_checker" accept="image/*"> 11 <input type="button" onclick="upload()" value="上传"> 12 <hr> 13 <img src="" id="show_img"> 14 15 <script> 16 function upload() { 17 //创建一个form数据对象 18 var formData = new FormData() 19 //将图片文件数据添加到form对象中 20 formData.append('avatar', document.getElementById('img_checker').files[0]) 21 $.ajax( 22 { 23 url: "/upload/", 24 type: "post", 25 //与普通Ajax提交不同的是，上传文件需要指定processData和contentType属性值为false，原来的data对象直接使用FormData对象 26 processData: false, 27 contentType: false, 28 data: formData, 29 success: function (data) { 30 alert(data) 31 } 32 } 33 ) 34 //此时后端就可以像接收传统form表单提交的数据方式接收图片 35 } 36 </script> 37 </body> 38 </html>