File upload for "ExtJS" ExtJS

Source: Internet
Author: User

ExtJS file upload is also in the way of Ajax, basically, after the user uploads, the results are immediately pushed back to the foreground. The following is a ExtJS image upload system to illustrate this problem.


I. BASIC OBJECTIVES

To achieve the following image upload system, not the basic image format, larger than 1M picture does not give upload, upload successful display pictures, upload unsuccessful, then display error message.



Second, the basic idea

The directory structure of this project is as follows,


As shown in the HTML layout of fileupload.html, JS and ext-theme-classic below are the basic resources of ext. Then the upload folder is used to store uploaded images, fileupload.html is the foreground layout page, which has a panel component directly rendered to the <body> tag, the panel component, only one file field, equivalent to <input type= "File"/>. After the upload is successful, a window can be closed. Photosubmit.php is the background processing page for uploading files.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "Http://www.w3.org/TR/html4/strict.dtd" >

third, the production process

1, fileupload.html

This front layout page also uses the form's most basic anchor layout, and then takes advantage of the ExtJS Ajax form submission method, which is in the "ExtJS" ExtJS form plug-in and form layout, submission and verification (click Open Link) has been specifically mentioned. Remember that the ExtJS file field type is Filefield. The bottom work bar of this panel is also a classic left and right space, with a "OK" button laid out in the middle. This button is not available between files that the user does not select.

<!        DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >2, photosubmit.php

ExtJS upload or not depends on the JSON information printed on this page. This page and "php" File upload and download (click Open link) upload part of no difference, using JSP friends can refer to, "Servlet" using Servlet3.0 Standard and JSTL expression to implement file upload system, support image upload display " (Click to open the link); "Struts2" File upload and Upload permissions control (click to open the link); Using ASP or. NET Friends is the same, the key is that your background page processing the uploaded files, and "ExtJS" ExtJS form plug-in and form layout, Submit and verify (click the Open link), print out the following string to let Fileupload.html recognize:

ExtJS received this JSON that the upload was successful {  "success": True,  "MSG": "SS"//information to be sent back to the foreground}//extjs received this JSON that the upload failed {  "success": false ,  "MSG": "SS"//information to be sent back to the foreground}  
Therefore, the following PHP code is available:

<?php//See if the normal way to pass a file over if (empty ($_files["file")) {//If not, it is not normal to open this page, immediately redirect, disguise this page does not exist header ("Location:er      Ror.php ");  Exit } else{Header ("content-type:text/html;  Charset=utf-8 ");  }//This is to determine whether to upload the file $canUpload =true;  This allows you to get the uploaded file name $fileName =$_files["File" ["Name"];  By processing the $filename, you can obtain the suffix name of the uploaded file $fileExtensions =strrchr ($fileName, '. ');  This allows you to get the size of the uploaded file $fileSize =$_files["file" ["Size"];    The error message that will be printed $errmsg = ""; Here is the file exception, generally does not appear if ($_files["file"] ["Error"]>0) {$errmsg. = "Exception:". $_files["File" ["Error"]. "!      ";  $canUpload =false; }//If you upload a filename with a suffix other than the following, you cannot upload if ($fileExtensions! = ". bmp" && $fileExtensions! = ". gif" && $fileExtensions ! = ". jpg" && $fileExtensions! = ". jpeg" && $fileExtensions! = ". png") {$errmsg. = "only upload picture Type! The suffix name must be:. bmp,gif,jpg,jpeg,png any one!      ";  $canUpload =false; }//If the uploaded file is larger than 1M, you cannot upload the if ($fileSize >1*1024*1024) {$errmsg. = "File is too large! Please less than 1m!      ";  $canUpload =false; }//If the file can beUpload if ($canUpload ==true) {//The name saved on the server is the timestamp, plus the file suffix $saveName =time (). $fileExtensions;      Gets the absolute path of the server's directory. $basepath =str_replace (' \ \ ', '/', Realpath (DirName (__file__). /'))."      /"; Then save this upload file Move_uploaded_file ($_files["file"] ["Tmp_name"], $basepath. "    /upload/". $saveName); After printing the successful upload json to the waiting Extjsajax, take a picture of the save address to it. Normally, this address should also be put into storage.  echo "{' Success ': true, ' msg ': ' Upload/{$saveName} '}";} else{//upload is unsuccessful, send a failure message to the foreground. echo "{' success ': false, ' msg ': ' {$errmsg} '}";   }?>


File upload for "ExtJS" ExtJS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.