通过ajax formdata 上传附件
1、主要使用ajax formdata
2、如果要做图片上传之前预览还需要blob的数据方式，window.URL.createObjectURL(blob);
下面是js代码，服务器端就可以直接使用php的超全局数据变量，$_FILES来i进行数据的处理。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <meta name="description" content=""> 8 <meta name="author" content=""> 9 <title>uploadify</title> 10 <script type="text/javascript" src="./js/jquery-1.11.1.js"></script> 11 <script type="text/javascript"> 12 $(function() { 13 $('#btn').on({ 14 click:function() { 15 var ff = new FormData(); 16 ff.append('file', $('#upload')[0].files[0]) 17 $.ajax({ 18 type:'POST', 19 url:'test.php', 20 data:ff, 21 dataType:'json', 22 //processData (默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。 23 processData:false, 24 contentType:false, // 必须false才会自动加上正确的Content-Type 25 success:function(msg) { 26 console.log(msg); 27 } 28 }) 29 } 30 }) 31 32 $('#upload').on({ 33 change:function() { 34 var data = $(this).get(0).files[0]; 35 var src = window.URL.createObjectURL(data); 36 $('#prew').attr('src', src); 37 } 38 }) 39 40 }) 41 </script> 42 </head> 43 <body> 44 <input type="file" id="upload" > 45 <button id="btn">上传图片</button> 46 <br> 47 <img src="" id="prew" style="width:500px;height:400px"> 48 </body>
