欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

JQ插件ajaxFileUpload、php实现图片,数据同时上传,_PHP教程

程序员文章站 2022-06-03 09:54:23
...

JQ插件ajaxFileUpload、php实现图片,数据同时上传,

代码结构如下:

JQ插件ajaxFileUpload、php实现图片,数据同时上传,_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('JQ插件ajaxFileUpload、php实现图片,数据同时上传,_PHP教程')    
22                              //console.log('JQ插件ajaxFileUpload、php实现图片,数据同时上传,_PHP教程')
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 = '