JS implementation of image file upload experience

Today to study a piece of the method of implementation, because last week did not write technical week, this time must write well!

So the problem is: PHP processing image upload requires JQ to realize the interaction of data, how to do?

650) this.width=650; "src="/e/u261/themes/default/images/spacer.gif "style=" Background:url ("/e/u261/lang/zh-cn/ Images/localimage.png ") no-repeat center;border:1px solid #ddd;" alt= "Spacer.gif"/>

Here is involved in a logo upload requirements, according to radio choose whether to update the logo, and the form form will be the JS event processing

650) this.width=650; "src="/e/u261/themes/default/images/spacer.gif "style=" Background:url ("/e/u261/lang/zh-cn/ Images/localimage.png ") no-repeat center;border:1px solid #ddd;" alt= "Spacer.gif"/>

<div class= "Comlogo sbox" ><div class= "CLheader" > Company logo:</div><div class= "Ui-imgselect tac" ><!--  No logo  --><!--  <em> No logo, no image </em> --><!--  logo  --></div><p class= "UI-IMG-BF" ><input class= "ui-imgbtn"  type= "button"  value= "Upload logo" ><input id= "ui-imgfile"  class= "Ui-imgfile"  type= "file"  name= " Fileimg "></p></div><p class=" Btnrd box "><strong> whether to update logo:</strong> <span><input type= "Radio"  name= "RDFR"  class= "Btn-radio"  value= "no"  checked= " Checked "/> No </span><span><input type=" Radio " name=" RDFR " class=" Btn-radio "  value= "is"/> is </span></p> 

Here is a place to pay special attention to, that is, JS or Ajax can not upload files, so we need to solve this problem, we will be in the JS method inside the writing of an HTML framework, using the IFRAME framework we can put the data we need to encapsulate the HTML inside. Then can normal post to the PHP background processing, because the HTML can be implemented file upload, JS is not, so we use the IFRAME framework to encapsulate the data, put it into the HTML to post to the PHP background processing, here is a good solution to this problem, Since the IFRAME framework cannot be displayed, we have to do a hidden processing on the style. Upload file is, parameter enctype= "Multipart/form-data" is necessary, this is the file upload to use a parameter. After the form of the normal submission of the line, the background acceptance is normal to accept the $_file data, this is the last file.

650) this.width=650; "src="/e/u261/themes/default/images/spacer.gif "style=" Background:url ("/e/u261/lang/zh-cn/ Images/localimage.png ") no-repeat center;border:1px solid #ddd;" alt= "Spacer.gif"/>

$ ("#submitForm"). Live ("Submit", function (e) {var  $infoForm  = $ (this);var  $submit  =  $ (". J-submit-infoprint"); var radio = $ (' input[name= ' RDFR ']:checked '). Val (); if (radio  !=  ' is ') {E.preventdefault (); $submit. Tipsbox ("Loading",  "trying to submit ...");if  (this.ajaxrequest_  != undefined && this.ajaxrequest_.readystate < 4)  {$submit. TipsBox (" Failure ", " do not repeat the submission "); return false;} This.ajaxrequest_ = jquery.ajax ( {type :  ' post ',url :  '/process/', data  :  $infoForm. Serialize (),datatype :  ' json ', success : function (data)  { Infologosuccess (result);}}); Return false;} else{$infoForm. attr ({' method ': ' Post ', ' target ': ' Infoform-iframe ', ' action ': '/process/', ' enctype ': ' multipart/ Form-data '});if  ($ ('. Ui-up-iframe '). length == 0)  {var iframeHtml =  ' < Iframe style= "display: none;"  name= "inFoform-iframe " id=" Infoform-iframe " class=" Ui-up-iframe "></iframe>"; $infoForm. After ( iframehtml);}) ();

This JS method, first get some values, determine the value of radio to do the corresponding operation, the form data in the AJAX submission of the specified path, based on the results of the return display operation results.

function infologosuccess (Result) {var $submit = $ (". J-submit-infoprint"); if (result>0) {if (data[' param ' [' type ']! = [' HR ']) {window.location.href = data[' param ' [' companyurl '];} $submit. Tipsbox ("Success", "You have submitted success"); else if (result = = ' -10 ') {$submit. Tipsbox ("Tips", "You have not modified the Enterprise profile:)"); function Removetipsbox () {$submit. Removetipsbox ();} SetTimeout (removetipsbox,1500);} else{$submit. Tipsbox ("Failure", "Network Timeout");}}

The result of the operation is displayed according to the result of the return, written to the outside of the radio decision processing because the method is independent and the value of radio does not affect it.

JS on the process of file processing is so, the choice of radio, corresponding to do different operations processing, and then in JS write an HTML package processing, to solve JS and Ajax can not upload the file problem, after the PHP processing returned value to judge processing.

How does PHP handle submitted data, processing, especially upload files (now image upload) Processing:

 //  Update Company Information $result = companyeditlogfunction::updatecompanyinfo  (  $companyID,   $nowName,  $nowSort,  $nowWorker,  $nowCity,  $nowAddress,  $nowURL,  $ nowcontent,  ", ",  $nowCompanyType,  $nowSmallIndustry,  $nowShortName  );//  Update company picture if  ($_post [' RDFR '] ==  ' is ')  {//  company logo$logo = $_files [' Fileimg '];if  (is_uploaded_file  (  $logo  [' tmp_name '] )  {//  file upload $time =  microtime  ( true )  * 10000;//get the suffix of the picture $len = strrpos ($logo  [' name ' ],  '. '); $suffix  = substr ($logo  [' name '],  $len + 1); $fileName  =  "{$time}. {$suffix} "; $dir  = ImageClass::seperateUserPath  (  $companyID  ); $imageClass  =  new ImageClass  $r  =  $imageClass->upload_image  (  $logo,  " CompanyLogo " .  $dir,  $fileName, false );if  ($r  > 0)  {//  mobile big picture $absolutepath = urlbean:: makelogopath  (  $companyID,  $fileName  );//  big picture processing $imageclass = new  imageclass  (), $absoluteBigThumbPath  = URLBean::makeLogoPath  (  $companyID,  $ filename,  ' big '  ), $makeThumbResult  =  $imageClass->make_thumb  (  $absolutePath,   ',  ',  $absoluteBigThumbPath  );if  ($makeThumbResult)  {$result  =  CompanyLogoLogic::updateLogo  (  $companyID,  $fileName,  ' Y '  , ' N ');}  else {if  ($_post [' type '] !=  ' hr ')  {echo  ' error message '  . $ imageclass->error_msg  ();}}}}

The processing here is to perform the text data warehousing operations, after the execution of the image processing operations, the first to take out the pictures inside the $_files, and then get some of the necessary parameters or some of the data used, call the picture class to deal with, assemble the image of the path and picture name, The corresponding update picture method is then called and processed. After the update of the successful image compression processing, create a picture URL and other operations, and finally for the image upload operation to lay a good foundation.

if ($_post [' rdfr '] = = ' is ') {echo "<script>parent.infologosuccess ({$result}) </script>";} Else{echo Pageutil::setjsonreturn ($result, $param);}

This is a successful operation, call the parent page to display the results, because the previous submission data is submitted in the child page iframe there is a normal way to return results should be displayed on the sub-page, but we did a style of hiding in there, so that even if you return the result is still invisible, So we need to get the results back to the parent page, and this code is what we want:

echo "<script>parent.infologosuccess ({$result}) </script>"

In summary, this is a picture using JS processing upload one of the solution, of course you can also directly with HTML upload, this simple, HTML also has the corresponding system variables to you

Pass the data, so the reason that uses JS method, this method considers the place that the page does not need to refresh to see the result, improve the system performance effectively.

This article is from the "I am a phper" blog, please be sure to keep this source http://thinkforphp.blog.51cto.com/8733331/1577491

JS implementation of image file upload experience