Detailed explanation of Thinkphp combined with ajaxFileUpload to implement asynchronous image transmission sample code

This article mainly introduces you to the method of using Thinkphp combined with ajaxFileUpload to realize asynchronous image transmission. The article gives detailed sample code, which has certain reference value for everyone. Friends who need it Let’s take a look together below.

Preface

Before doing this project, image upload processing has always been done directly through form submission for file transfer. This time due to demand, it is necessary to implement the Asynchronous transmission of pictures is not difficult to implement. After all, there are too many plug-ins now, but it still wastes a lot of debugging time. The reason is that I used the ancient plug-in ajaxfileupload, which frequently reported errors when I first started using it. handler is not a function.

With a heavy heart, I searched Baidu and found the answer. I couldn’t help but feel that the general search engineindex is really powerful.

Solution

The reason for the above error is that jqueryhas no longer used the handler method since 1.9.0. The specific reason is unknown , so you can only manually add the code in the downloaded jQuery.extend({:

handleError: function( s, xhr, status, e ){
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}

// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
}

, and continue debugging

$.ajaxfileupload({

　　url : '',

　　secureuri : '',

　　fileElementId : '', --> 这里填的是 input file的ID

　　data : {},

　　dataType : 'json',

　　complete : function(data){}　

})

The code no longer reports errors, but there is a new problem. The returned data is always undefined. Then I looked at the debugging tool and found that the return value exists and the format is OK. I can’t figure it out. After that, I went to Baidu again,

and then made two adjustments:

1. Replace eval('data = '+ data); in ajaxfileupload.js with data = jQuery.parseJSON(jQuery(data).text());

2, replace the complete method with success

ok, the data returned by the backend can be printed

Summary

The above is the detailed content of Detailed explanation of Thinkphp combined with ajaxFileUpload to implement asynchronous image transmission sample code. For more information, please follow other related articles on the PHP Chinese website!