JQ插件ajaxFileUpload、php实现图片,数据同时上传,
程序员文章站
2024-01-20 18:16:04
...
JQ插件ajaxFileUpload、php实现图片,数据同时上传,
代码结构如下:
1、HTML代码,没必要解释了。
1 DOCTYPE html> 2 html> 3 head> 4 meta charset="UTF-8"> 5 title>文件上传title> 6 script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script> 7 script src="uploads/ajaxFileUpload.js" type="text/javascript" charset="utf-8">script> 8 script type="text/javascript"> 9 $(function(){ 10 $('#ti').click(function(){ 11 var data = { name: 'my name', description: 'short description' } 12 $.ajaxFileUpload({ 13 url: 'up.php', 14 secureuri: false, 15 data: data, 16 fileElementId: 'upf', 17 dataType: 'json', 18 success: function (data) { 19 // var datejson=eval(data); 20 //console.log(data[0].path_name) 21 $('#im').append('') 22 //console.log('') 23 }, 24 error: function (data) { 25 console.log(data) 26 } 27 }); 28 29 }) 30 31 }) 32 script> 33 head> 34 body> 35 37 input type="file" name="upfm" id="upf" value="" /> 38 input id='ti' type="button" value="提交"/> 39 40 div id="im"> 41 42 div> 43 44 body> 45 46 html>
2、关于ajaxFileUpload插件,在下面代码中如果你使用的是JQ1.9以上请复制1-12到你的ajaxFileUpload代码中,JQ在很早就废弃了handleError方法。注释关于代码的解释很清楚。
1 jQuery.extend({ 2 handleError: function( s, xhr, status, e ) { 3 4 if ( s.error ) { 5 s.error.call( s.context || s, xhr, status, e ); 6 } 7 8 9 if ( s.global ) { 10 (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] ); 11 } 12 }, 13 createUploadIframe: function (id, uri) {//id为当前系统时间字符串,uri是外部传入的json对象的一个参数 14 //create frame 15 var frameId = 'jUploadFrame' + id; //给iframe添加一个独一无二的id 16 var iframeHtml = '