JavaScript file API to implement upload preview _javascript tips

I. Overview
access to local files has been a headache for browser-based applications in the past. While JavaScript is playing an increasingly important role with the development of WEB 2.0 applications, JavaScript has been unable to access local files for security reasons. So, in order to be able to implement functions such as dragging and uploading local files in the browser, we have to resort to the various technologies provided by the specific browsers. For example, for IE, we need to access the ActiveX control to the local files, and Firefox, the same as the use of plug-in development. Because the technology implementations of different browsers are not the same, in order for programs to support multiple browsers, our programs become complex and difficult to maintain. But now, all this has been completely changed by the appearance of the File API.

The file API is a draft of Mozilla's submission to the consortium aimed at introducing a standard JavaScript API with the basic function of implementing JavaScript to manipulate local files. For security reasons, the API only provides limited access to local files. With it, we can easily use pure JavaScript to achieve the local file read and upload. Currently, FireFox 3.6 is the first browser to support this feature. In addition, the latest version of the Google Chrome browser and Safari browser also have the corresponding support. The File API is expected to be part of the future HTML 5 specification currently being developed by the consortium.

Ii. Overview of the File API
The File API consists of a set of JavaScript objects and events. Empowers developers to manipulate the ability to select files in the <input type= "file" .../> file selection control. Figure 1 shows the composition of all JavaScript in the File API.

The

Type filelist contains a set of File objects. Typically filelist objects can be taken from the file fields (<input type= "file" .../>) in the form. A Blob object represents a set of raw binary streams that the browser can read. Blob object, the property size represents the size of the stream. function slice () You can split a long Blob object into small chunks. The file object inherits from the Blob object and adds a file-related property to the Blob object. Where the property name indicates the name of the file, which removes the path information of the file and retains only the filename. The property type represents the MIME type of the file. The property urn represents the urn information for this file. A FileReader object instance associates a file or Blob object and provides three different file-reading functions and 6 events for the operation of the read.

file read function specific content:
readasbinarystring ()   read the contents of the file, read the result to a Binary string. Each byte of a file is represented as an integer within a [0..255] interval. function takes a File object as an argument.
readastext ()   reads the contents of the file, reading the result as a string of text representing the contents of the file. function takes a File object and a text-encoded name as an argument.
readasdataurl  reads the contents of the file and reads the URL of the result as a data:. Dataurl is defined by RFC2397.
File read event specific content:
Event name   Event description
onloadstart  The file read start trigger.
progress  When the read is in progress, triggered periodically. The event parameter contains the total amount of data that has been read. The
abort  fires when the read is aborted. The
error  fires when an error is read. The
load  fires when the read completes successfully.
loadend  When read completes, either success or failure will trigger.

Three, the File API simple example
Next we use a simple example to show the basic usage of the File API. This example contains two code files, index.html the HTML code that contains the Web side, and processes the uploaded JavaScript code; upload.jsp contains the server-side code to receive the uploaded file. Please see the sourcecode.zip in the attachment. In this example, we will show a traditional form with a File selection field. When the user selects the file and clicks Submit, we use the file API to read the contents of the files and upload the files to the server in Ajax mode using the XMLHttpRequest object. Figure 2 shows a screenshot of the demo in motion.

Let's step through the code. Listing 1 shows the HTML part of the code.
Listing 1 The HTML section of the sample code

 <body> 
  
 

Here, the object type returned from the form["file"].files is the reference filelist. We take the first element from it. After that, we build the FileReader object:
var reader = new FileReader ();
When the Onloadstart event is triggered, populate the <span> element on the page that represents the total amount of read data. See Listing 4
Listing 4 Onloadstart Events

 Reader.onloadstart = function () 
 { 
 console.log ("Onloadstart"); 
 document.getElementById ("Bytestotal"). textcontent = File.size; 
 }
Updates the <span> element of the amount of data read on the page when the OnProgress event is triggered. See Listing 5

Listing 5 OnProgress Events

 reader.onprogress = function (p) { 
 console.log ("Onloadstart"); 
 document.getElementById ("Bytesread"). textcontent = p.loaded; 
 }

In the final Onloadend event, if there is no error, we will read the contents of the file and upload it in XMLHttpRequest way.
Listing 6 Onloadend Events

 Reader.onloadend = function () 
 { 
 if (reader.error) 
 { 
 console.log (reader.error); 
 } 
 else 
 { 
 ///Construct XMLHttpRequest object, send file Binary data
 var xhr = new XMLHttpRequest (); 
 Xhr.open (/* Method/"POST" * * 
 target URL/"upload.jsp?filename=" + file.name/ 
 *, async, default to True * * * ; 
 Xhr.overridemimetype ("Application/octet-stream"); 
 Xhr.sendasbinary (Reader.result); 
...
 } 
 }

According to the specification of the File API, we can also split the processing of event Onloadend into event error and event load processing.
In this example, we use a JSP in the background to process the upload. The JSP code is shown in Listing 7.
Listing 7 processing the uploaded JSP code

 <%@ page import= "java.io.*"%><% 
  bufferedinputstream filein = new 
 Bufferedinputstream ( Request.getinputstream ()); 
  STRING fn = request.getparameter ("FileName"); 
  
  byte[] buf = new byte[1024];
Receive file upload and save to d:\ file file
  = new file ("d:/" + fn); 
  
  Bufferedoutputstream fileout = new Bufferedoutputstream (new 
 fileoutputstream (file)); 
  
  while (true) { 
    //Read data
   int bytesin = filein.read (buf, 0, 1024); 
   
   System.out.println (bytesin); 
   
   if (Bytesin = = 1) 
 {break 
     ; 
   } 
 else 
 { 
     fileout.write (buf, 0, Bytesin); 
   } 
  } 
  
  Fileout.flush (); 
  Fileout.close (); 
  
  Out.print (File.getabsolutepath ()); 
 %>

In this JSP code, we accept the file name and binary data from the POST request. Writes binary data to the server's "D:\" path. and returns the full path to the file. The above code can be debugged in the latest Firefox 3.6.
Iv. Use drag and drop to upload files
We have described how to use the HTML5 file API to read local file content and upload it to the server, which has been able to meet the needs of most users in this way. One of the shortcomings is that users can only click the "Browse" button to add files individually, if the need to bulk upload files, will lead to user experience is not very friendly. In desktop applications, users can generally easily upload files by dragging the mouse. Drag-and-drop has always been a Web application of a soft rib, the general browser does not provide for drag-and-drop support. Although WEB programmers can implement drag-and-drop effects through events such as mouse mouseenter,mouseover and mouseout, this approach can only limit the drag-and-drop range to the browser. The good news is that HTML5 not only added the file API, but added support for drag and drop, Firefox 3.5 has already supported the file API and drag-and-drop. Let's start with a brief introduction to drag and drop, and then use an example to illustrate how to drag and drop the file.
1, drag and drop introduction
Drag-and-drop generally involves two objects: drag and drop the source and drag the target.
Drag source: In the HTML5 draft if an object can be dragged as a source, you need to set the Draggable property to True to identify the object as a drag-and-drop source. Then listen for the DragStart event of the source object and set the DataTransfer in the event handler function. You can set the type and value of the dragged data in the datatransfer. For example, a value of plain text, you can set the type to "Text/plain", and the URL sets the type to "Text/uri-list". This allows the target object to select the data based on the desired type.
Drag target:A drag target must listen for 3 events.
DragEnter:The target object determines whether to receive drag by responding to this event. If you receive, you need to cancel this event to stop the propagation of the time.
DragOver:Displays the drag-and-drop effect by responding to this event.
Drop:The target object handles drag and drop data by responding to this event. In the following example, we will get the DataTransfer object in the handler for the drop event to retrieve the file to upload.
As this article mainly introduces the File API, this part is not explained in detail, interested readers can refer to the draft HTML5 (see Resources).
2, drag and drop upload file instance
Here is a more specific example of how to use the drag and File APIs to upload documents. Because of direct and desktop interaction, we do not need to process drag and drop sources, directly from the target object to get data from the DataTransfer object.
First, we need to create a target container to receive drag and drop events and add a DIV element. Then use a list to show thumbnails of uploaded files, progress bars, and file names. See the HTML code in Listing 8 and the effect diagram in Figure 3. For detailed code, see the Dnd.html file in the attachment.
Listing 8 The HTML code for the drag target

 <div id= "Container" > 
 <span>drag and drop files here to upload.</span> <ul id= 
 "FileList" ></ul> 
 </div>

After dragging the target to be created, we need to listen for its corresponding event dragenter,dragover and drop. In the DragEnter event handler, we simply clear the file list and then cancel the propagation of the DragEnter event, indicating that we received the event. A more appropriate approach is to determine whether the data in the DataTransfer is a file, and here we assume that all drag sources are files. In the DragOver event, we cancel the event and use the default drag-and-drop display effect. In the drop event we registered the Handledrop event handler to get the file information and upload the file. Listing 9 shows these event handler functions.
Listing 9 Setting the event handler function

 function Adddndlisteners () 
 { 
 var container = document.getElementById ("container"); 
 var filelist = document.getElementById ("filelist"); 
 Drag
 to Trigger Container.addeventlistener ("DragEnter", Function (event) 
 { 
 filelist.innerhtml = ') when entering the target object; 
 Event.stoppropagation (); 
 Event.preventdefault (); 
 }, False); 
 Drag on target object
 to trigger Container.addeventlistener ("DragOver", Function (event) 
 { 
 event.stoppropagation (); 
 Event.preventdefault (); 
 }, False); 
 Triggers
 container.addeventlistener ("Drop", Handledrop, false) at the end of the drag; 
 Window.addeventlistener ("Load", adddndlisteners, false);

Process Drop Events
Users release the mouse trigger drop event at the end of the drag. In the drop event, we can get the files data through the DataTransfer object of the event parameter, and we can get information about each file by traversing the files array. Then for each file, create HTML elements to display thumbnails, progress bars, and file names. The getasdataurl of the file object can be returned as a URL and can be used to display thumbnails for picture files. It is important to note that in the drop event handler, the continuation propagation of the event and the default handler function are canceled to end the processing of the drop event. Listing 10 shows the processing code for the drop event.
handling of the drop event for the list

 function Handledrop (event) {//Get dragged file list var files = event.dataTransfer.files; 
 Event.stoppropagation (); 
 Event.preventdefault (); 
 var filelist = document.getElementById ("FileList"); 
 Show file thumbnail, filename and upload progress, upload file for (var i = 0; i < files.length; i++) {var file = Files[i]; 
 var li = document.createelement (' li '); 
 var ProgressBar = document.createelement (' div '); 
 var img = document.createelement (' img '); 
 var name = document.createelement (' span '); 
 Progressbar.classname = "ProgressBar"; 
 IMG.SRC = Files[i].getasdataurl (); 
 Img.width = 32; 
 Img.height = 32; 
 name.innerhtml = File.name; 
 Li.appendchild (IMG); 
 Li.appendchild (name); 
 Li.appendchild (ProgressBar); 
 Filelist.appendchild (LI); UploadFile (file, ProgressBar)}} 

upload file
We can upload files through the XMLHttpRequest object's Sendasbinary method by listening to upload progress,load and Error events to monitor the progress of file uploads, successfully completed or whether an error occurred. In the Progress event handler we determine the position of the progress bar by calculating the proportions that have been uploaded. See listing 11. Figure 4 shows the effect of uploading the file.
Listing 11 uploading files

 function UploadFile (file, ProgressBar) {var xhr = new XMLHttpRequest ();

 var upload = Xhr.upload; 
 var p = document.createelement (' P '); 
 P.textcontent = "0%"; 
 Progressbar.appendchild (P); 
 Upload.progressbar = ProgressBar; 
 Set up the upload file related event handler function Upload.addeventlistener ("Progress", uploadprogress, false); 
 Upload.addeventlistener ("Load", Uploadsucceed, false); 
 Upload.addeventlistener ("Error", Uploaderror, false); 
 Upload file Xhr.open ("POST", "upload.jsp?filename=" +file.name); 
 Xhr.overridemimetype ("Application/octet-stream"); 
 Xhr.sendasbinary (File.getasbinary ()); } function Uploadprogress (event) {if (event.lengthcomputable) {//Convert progress to percent var percentage = Math.Round (Eve 
 nt.loaded *)/event.total); 
 Console.log ("Percentage:" + percentage); 
 if (percentage < MB) {Event.target.progressbar.firstChild.style.width = (percentage*2) + "px"; 
 event.target.progressbar.firstChild.textContent = percentage + "%"; }} function Uploadsucceed (EVENT) {event.target.progressbar.firstChild.style.width = "200px"; 
 Event.target.progressbar.firstChild.textContent = "100%"; 
 function Uploaderror (Error) {alert ("Error:" + error);

 }

This article illustrates the full picture of the JavaScript file API as an important part of future HTML5 by explaining the file API specification and two examples showing how to use it. Using it, combined with the new features of other HTML5, such as Drag&drop, we can take advantage of the pure JavaScript scenario to provide users with a better WEB application for the experience, while such a consistent solution also avoids the huge cost of previous cross-browser support. It is believed that the appearance and wide application of the File API will be the trend of future WEB 2.0 applications.