H5-FileReader实现图片预览&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 <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>

 

posted @ 2018-08-08 17:56  zze  阅读(490)  评论(0编辑  收藏  举报