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>
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>
