The principle and implementation of Web upload file

Source: Internet
Author: User

Many Web applications now have upload capabilities, and there are many components or frameworks for uploading, such as Java-based Commons FileUpload, There is also the ability to upload files in struts1.x and Struts2 (in fact, Struts2 also uses Commons FileUpload at the bottom).

Although there are many upload components to take advantage of, but understanding the principle of Web upload files, to deal with the sudden occurrence of problems will be a great help, the following is the basic principle of uploading files through a browser. After understanding the principle, it is very easy to self-control the upload components to meet their own needs.

As we all know, in the client code need to use <input type= ' file ' name= ' file '/> To select the files to upload, and upload, code as above:

<HTML>    <Head>        <title>Upload</title>        <Metahttp-equiv= "description"content= "This is my page">        <Metahttp-equiv= "Content-type"content= "text/html; charset=gb18030">    </Head>    <Body>        <formAction= "Servlet/uploadfile"Method= "POST"enctype= "Multipart/form-data">            <inputtype= "File"name= "File1"ID= "File1" />            <inputtype= "File"name= "File2"ID= "File2" />            <inputtype= "Submit"value= "Upload" />        </form>    </Body></HTML>

As can be seen from the above code, there are two file selection boxes (File1 and file2), when uploading a file,<form> tag must be added enctype= "Multipart/form-data", otherwise the browser cannot upload the file content to the server. Let's do an experiment. Write the following code in the Servlet's Dopost method.

  Public voidDoPost (httpservletrequest request, httpservletresponse response)throwsservletexception, IOException {Java.io.InputStream is=Request.getinputstream (); Java.io.FileOutputStream Fos=NewJava.io.FileOutputStream ("D:\\out.txt"); byte[] buffer =New byte[8192]; intCount = 0;  while(count = is.read (buffer)) >0) {fos.write (buffer,0, Count);    } fos.close (); }

The function above is very simple, just get a InputStream object through request, and through this object from the client to get sent over the stream of bytes (note, be sure to use a byte stream, because, the uploaded file may be binary files, like files, so the use of byte stream will be more general). and save these byte streams in the D-disk OUT.txt file. Then we open OUT.txt, which shows the contents of the file 1:

Since OUT.txt is opened with text, and file1 uploads the a.jpg (an image file), some garbled characters are displayed. We can take care of them. Just look at the head of the content. We'll soon be able to find patterns. The header of each file content is separated by "-----------------------------30514443229777", followed by the properties of the file, as follows:

Content-disposition:form-data; Name= "File1"; Filename= "A.jpg"

Content-type:image/jpeg

It contains the Name property of the File selection box, as well as the uploaded file name (filename field), to note that when Firefox uploads, the FileName property value is just the filename, if using IE, is the file name with the path, such as D: "A.jpg."

The next rule is the same as the HTTP header, separated by a blank line ("R" N). The following is the specific contents of the file. Now at the end of the most critical file, as you can see from Figure 1, the end of the file is also "-----------------------------30514443229777", so it can be concluded that the first uploaded file (including the file header) is clipped to two "-------- ---------------------30514443229777 "between. The "-----------------------------30514443229777" is the delimiter for the Multipart/form-data protocol. But here is one of the most critical issues. This delimiter each upload is different, the server is how to know each upload this delimiter?

In fact, this delimiter is obtained through the Content-type field of the HTTP request header, which is output from the following code:

System.out.println (Request.getheader ("Content-type"));

The output reads as follows:

Multipart/form-data; boundary=---------------------------106712230227687

Just get the value behind boundary on the server. After testing, the "-" in the separator symbol in Content-type is two less than the "-" actually uploaded, and I don't know what is going on. It doesn't matter, however, that we can assume that each file block ends with "R" N "or that the delimiter obtained from boundary is added two"-"directly. The last delimiter is "---------------------------106712230227687-", followed by two "-".

To synthesize the above, that is, a block of files begins with "---------------------------106712230227687" and ends with "-", as you can see from Figure 2.

As for the rest of the work, the characters flow is analyzed according to the above rules. There are many methods of analysis. It's not going to be detailed here.

La La la

The principle and implementation of Web upload file

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.