Home > Developer > Web Develop
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 process1, 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.phpExtJS 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:
Therefore, the following PHP code is available: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}<?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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
