Thinkphp ajaxfileupload implements asynchronous Image Upload,

Thinkphp ajaxfileupload implements asynchronous Image Upload,

Thinkphp Developed Image Upload. asynchronous Image Upload is a convenient function at present. Here I will not write the css file and write the code. Introduction Core File Download https://github.com/carlcarl/A...

HTML

Next, we will introduce relevant js resources on the html page.

<! DOCTYPE html> 
Next, create the corresponding div in the body.
<Label class = "title w100"> cover image: </label> <div class = "f_l"> <label class = "fileupload" onclick = "upd_file (this, 'image _ file'); "> <input type =" file "class =" filebox "name =" image_file "id =" image_file "/> <! -- After the upload is successful, the image will assign the image path to the value, to facilitate form data submission --> <input type = "hidden" name = "image" value = ""> </label> <label class = "fileuploading hide"> </ label> </div> <div class = "blank15"> </div> <! -- After the upload is successful, the image will be displayed here; otherwise, it will be the default image --> 
Explanations:

Upd_file (this, 'image _ file') is indispensable.

The hidden input is used to assign a value to the image path after the upload is successful, so that the data can be submitted in the form.

Next, edit the javascript script in html to facilitate the transfer and submission of images.
<Script> function upd_file (obj, file_id) {$ ("input [name = '" + file_id + "']"). bind ("change", function () {$ (obj ). hide (); $ (obj ). parent (). find (". fileuploading "). removeClass ("hide"); $ (obj ). parent (). find (". fileuploading "). removeClass ("show"); $ (obj ). parent (). find (". fileuploading "). addClass ("show"); $. ajaxFileUpload ({url: '/index. php/home/avatar/app_upload_image ', // upload the image processing file secureuri: false, fileElementId: fil E_id, dataType: 'json', success: function (data, status) {$ (obj ). show (); $ (obj ). parent (). find (". fileuploading "). removeClass ("hide"); $ (obj ). parent (). find (". fileuploading "). removeClass ("show"); $ (obj ). parent (). find (". fileuploading "). addClass ("hide"); if (data. status = 1) {$ ("# image "). attr ("src", data. thumb_url + "? R = "+ Math. random (); $ ("input [name = 'image']"). val (data. url ); // After json is returned, the input value will be hidden. // $ ("# img_url" ).html ('<input type = "hidden" name = "img_url" value = "' + path. path + '"/>');} else {$. showErr (data. msg) ;}}, error: function (data, status, e) {$. showErr (data. responseText); $ (obj ). show (); $ (obj ). parent (). find (". fileuploading "). removeClass ("hide"); $ (obj ). parent (). find (". fileuploading "). removeClass ("show"); $ (obj ). parent (). find (". fileuploading "). addClass ("hide") ;}}); $ ("input [name = '" + file_id + "']"). unbind ("change") ;}) ;}< script>
Create method app_upload_image () in thikphp ()
Function app_upload_image ($ maxSize = 52428800) {$ id = session ('id'); $ config = array ('rootpath' => 'upload ', // The root path 'savepath' => '/avatar/', 'exts' => array ('jpg ', 'gif', 'png ', 'jpeg ', 'bmp'), 'maxsize' => $ maxSize, 'autosub' => true,); $ upload = new \ Think \ Upload ($ config ); // instantiate the upload class $ z = $ upload-> uploadOne ($ _ FILES ['image _ file']); if ($ z) {// The Path Name of the spliced image $ img = '/upload '. $ z ['savepath']. $ z ['savename']; $ _ POST ['image _ file'] = $ img; // obtain the absolute path of the uploaded image $ imgsrc =$ _ SERVER ['document _ root']. _ ROOT __. $ _ POST ['image _ file']; $ image = new \ Think \ image (); $ Image-> open ($ imgsrc ); // cut the image to 205,160 X and save it as corp.jpg $ Image-> thumb (, \ Think \ image: IMAGE_THUMB_CENTER)-> save ($ imgsrc ); $ this-> ajaxReturn (array ("thumb_url" => $ img, "url" => $ img, "status" => 1 ));}}
Okay. Let's talk about it first. If ajaxfileupload. js reports an error, the program won't run. If your program reports an error, check whether your ajaxfileupload file is of a version.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.