File talk--drag and drop upload forward

In the article [file discussion-First knowledge of file control] (http://www.seejs.com/archives/668 "File discussion-the first knowledge of file control"), we have a preliminary understanding of the file control, And to make a detailed description of creating a visual and experience consistent file control, today we continue to learn more about the properties of the file control and extend it more. # # New Property before the advent of HTML5, the majority of cases using the file control, our front-end engineers need to use the useful information can only be obtained by the Value property of the file name string to obtain (such as: file type, the direct name of the file, etc.), this is inconvenient, More hassle when uploading multiple files. In addition, we do not want to obtain the size of the upload file by other means is a kind of extravagant hope. However, fortunately this is not so bad, with the advent of HTML5, the files property has been added to the file control. This property includes the File object collection selected by the file control, each containing the basic information (type, name, size) of the current file, etc., so that we can no longer use regular Ah, string splitting ah, and so the troublesome way to get the information we want. Let's look at the structure of the files property in the Chrome console. My test method is this: first, use the Chrome browser to open a Web page, then F12 the development tool, and then enter in the console: "Document.body.innerHTML = ' <input type=" file "id = "J_file" > '; var f = document.getElementById (' j_file '); f.onchange = function () {console.log (this.files);}; When the page is replaced with a file control, click to select one or more local files (multiple multiple attributes need to be added on the Input tab), then the change event will be triggered and the console will output the data:! [Filelist] (http://www.seejs.com/wp-content/uploads/2015/06/fileList.png) It is obvious that the value of the Files property is an object of type FileList, which is similar to the array, Also has the length property, and we can also use the loop to get each file object (example: Take the first file is Files[0]). We continue to look at the information contained in each file object, and the name, size, type, etc. that we use most often, all of a sudden feel goodTall on. However, I would like to tell you that we can not use the Files property of the file control recklessly, because it does not exist in the IE9 and the following versions of IE browser, we need to use other means (flash, etc.) to compensate for this problem, this does not unfold. # # File control is under threat the status of the file control is obviously improved with the presence of the Files property, but this does not mean that it is more stable. With HTML5 and secondly, there is not only the files property of the file control. We've been able to see drag-and-drop uploads on a growing number of sites that are a novel and more user-consistent interactive effect. I'm not going to say this. The implementation of the drag-and-drop upload feature, let's take a look at another way to get the FileList object. First, we need a drag-and-drop static interface, not much detail, directly on the code: ' <style> * {margin:0;padding:0;}. up-area {margin:50px auto;border:1px dashed #ccc; Background-color: #eee; Width:600px;height:400px;line-height:400px;text-align:center;color: #666; cursor: pointer;} . up-area:hover {background-color: #ddd;} </style> <input type= "file" Name= "id=" J_uploadfile "style=" display : none; " > <div class= "Up-area" id= "J_uploadarea" > click here or drag in file for upload </div> <script> (function () {var area = Docu Ment.getelementbyid ("J_uploadarea"), File = document.getElementById ("J_uploadfile"); function UploadFile (FS) {Console.log (fs),} Area.onclick = function () {console.log (' click '); File.Click ();}; File.onchange = function () {UploadFile (this.files);}; Area.ondragenter = function (ev) {this.classname = ' up-area hover '; Ev.preventdefault ();}; Area.ondragover = function (EV) {Ev.preventdefault ();}; Area.ondrop = function (EV) {ev.preventdefault (); Console.log (' drop '); var dt = ev.datatransfer; this.classname = ' Up-area ‘; UploadFile (Dt.files); }; })(); </script> "online [Demo] (http://www.seejs.com/demos/preview/dragin/). Drag the file into the gray area to release it to see the file information on the page. Careful friends may have found out, in fact, we provide another way to optimize the file control-completely using another label substitution, in the Click event of the tag to actively trigger the file control's click event, as in the above code: ' File.Click () '. However, this is not the focus of this article. We look closely at the last paragraph in the code above, the OnDrop event handler, and our files object is not from the file control, but rather a thing called datatransfer. So can we be bold to guess that the drag-and-drop upload function can actually completely throw away the file control to complete independently? Let's leave a suspense here and we'll discuss it later. In the above case, we can get the FileList object by clicking to select the file, and get the FileList object by dragging the file into the gray area, but we get the same data, which is enough to show that the file control is no longer dictatorial, Its status has gradually begun to be threatened. Author Blog: [Hundred yards villa] (http://www.seejs.com)

File talk--drag and drop upload forward