Several ways to upload files at the front end

For security reasons, the operating system assigned to the browser is lower, and a single Web page has a lower access to the user's computer operation, this is to prevent the user's improper operation caused malicious web pages arbitrarily delete and modify the user's local files, Therefore, all file operations in the front-end Web pages must be initiated by the user to trigger file uploads.

The types of user-triggered file upload operations are generally used in several ways

• Using the Input tab, you can select a local file by typing a type into the box

• File upload via HTML5 drag-and-drop method

• By copying files in the edit box
  Here we have a detailed analysis of these different upload methods, analysis of the different methods of a special effect and pros and cons

Input upload

Input upload

<form>
   <input type="file" id="uploadfile" >
</form>

Then we can bind a change event to this input, and when the element is checked, we get the current object and manipulate the value of the property of its files, with the following code:

var file=document.querySelector("#uploadfile");
   file.onchange=function(){
       var object=this;
       console.log(object.files);
       for(var i=0;i<object.files.length;i++){
           var url=window.URL.createObjectURL(object.files[i]);
       }
   }

A FileList object is output in the console, which contains the multiple files currently selected. We use this object for property access to get an example of the window.file we need, and we can filter the file type and file size we need by filtering the type,size of this instance.

We can then pass through window. Url.createobjecturl This method obtains the path of a Window.file instance to obtain the path of the file in the user's computer, the path is different from the one we often use, it is transparent to the front-end developer and cannot read the content directly but the computer can read it. Its address points to a blob of local data, this data can be directly on the page IMG, video, audio and other elements set a path for users to preview on the front page of the operation

H5 Drag and drop

<div class="img-container">
   将图片拖拽至此
</div>

He'll show a box on the page, and then we can listen to his drag-and-drop event.

var file=document.querySelector(".img-container");
   file.ondragover=function(){
       var object=event.originalEvent.dataTransfer;
       console.log(object.files);
       for(var i=0;i<object.files.length;i++){
           var url=window.URL.createObjectURL(object.files[i]);
       }
   }

We read the original time object of the drag event to get a class FileList object, and the next way to do this is to

File pasting

<div class="img-container"  contenteditable="true">
   将图片粘贴至此
</div>

If we use the image pasting method, we usually need to set a property that contenteditable to true for this target Div, because the div element is not editable by default

var file=document.querySelector(".img-container");
   file.onpaste=function(){
       var object=event.originalEvent.clipboardData;
       console.log(object.files);
       for(var i=0;i<object.files.length;i++){
           var url=window.URL.createObjectURL(object.files[i]);
       }
   }

Using the Paste method, the data to be pasted at this time is all hidden in the event's. Originalevent.clipboarddata property value, obtained is also a filelist, the next method of operation is as follows

Several ways to upload files at the front end