Home > Developer > Web Develop
File uploads are an essential part of the project. In general, as long as there is an upload page can be uploaded directly to the site below the image.
However, a common file upload component is necessary when there are many projects, or if the project is too large to be needed to upload files.
And what I need is the file upload is on a separate server (the external embodiment is the site and the picture is not the same domain name)
This way the File upload page and the current site need to cross-domain upload operations.
There is no problem with the upload process, but the callback operation after the upload ends cannot be performed because the value cannot be accessed across the domain.
Through the collation of some articles on the internet, the scheme is as follows
Call the file Upload component's page (url=http://localhost:2565/...)
<Body> <formID= "Fileform"name= "Fileform"enctype= "Multipart/form-data"Target= "Hideframe"Method= "POST"Action= "Http://localhost:13124/Upload/FileHandler.ashx?cb=http://localhost:2565/fileUploadCB.htm"> <inputtype= "File"ID= "Fileselector"name= "Fileselector" /> </form> <iframeID= "Hideframe"name= "Hideframe"style= "Display:none;"></iframe> <inputtype= "button"ID= "Btnupload"value= "Upload" /> <Script>Document.queryselector ("#btnUpload"). onclick= function () { This. Style.backgroundcolor= "Blue";//The button is blue during the upload process.Document.queryselector ("#fileform"). Submit (); } functionUploadcallback (RST) {Document.queryselector ("#btnUpload"). Style.backgroundcolor= "";//upload End button color replyConsole.log (RST); }</Script>
The target of the form specifies a hidden iframe so that the current page is not refreshed by uploading the image.
is actually equivalent to opening the link specified in the action in a hidden IFRAME and post the data in the form
As for the action link there is a parameter CB, this CB link in the entire operation is crucial: it is the first step of the callback operation after the end of the upload.
Background code for uploading files (http://localhost:13124/Upload/FileHandler.ashx)
Private Const intMax_upload_size =2;/// <summary>///upload File/// Fileselector is the name of the file control in the foreground code
/// </summary>/// <returns></returns> Public stringUploadFile (HttpRequest req, HttpResponse res) {if(req. files["Fileselector"]. ContentLength > Max_upload_size *1024x768*1024x768) { returnString.Format ("please upload a file within {0}m. ", max_upload_size); } stringUploadfilename = req. files["Fileselector"]. FileName; stringPath =HttpContext.Current.Server.MapPath (uploadfilename); Req. files["Fileselector"]. SaveAs (path); return "";} /// <summary>///REDIRECT to the specified link after the upload is complete/// </summary>/// <param name= "context" ></param> Public voidProcessRequest (HttpContext context) {stringresult =UploadFile (context. Request, context. Response); if(String.IsNullOrEmpty (Result)) {result="Upload Successful"; } stringCBSRC = context. request["CB"]; Context. Response.Redirect (CBSRC);}
NOTE: CB specified after the upload end of the link with the call to upload the components of the page is homologous.
CB-Specified page (http://localhost:2565/fileUploadCB.htm)
<HTMLxmlns= "http://www.w3.org/1999/xhtml"><Body> <Script>Alert ("Success Oh yeah!"); Parent.uploadcallback ("Upload success!"); </Script></Body></HTML>
This page just serves as a relay for uploading the results to the main page and executing the callback function after the upload is finished.
The above gives only the basic scheme. Specific words still have a lot of things to do, upload simultaneous parameters or to study it because this determines the classification of documents, user attribution and so on.
Most of the work is not necessary to write their own, there are many mature upload plugin
such as Fineuploader
Cross-domain File upload solution
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
