Jquery implements the drag file upload and loading progress bar function, jquery File Upload

Jquery implements the drag file upload and loading progress bar function, jquery File Upload

To upload a file, you can drag the file to use the ondrop event of HTML5. the upload content channel FormData transmission is as follows:

// The progress bar <div class = "parent-dlg"> <div class = "progress-label"> 0% </div> <div class = "son"> </div> </div> // Where to drag <div class = "main_content_center"> </div>

Js:

Var dz = $ ('# main_content_center'); dz. ondragover = function (ev) {// block the operation ev that the browser opens the file by default. preventDefault ();} dz. ondrop = function (ev) {ev. preventDefault (); var files = ev. dataTransfer. files; var len = files. length, I = 0; while (I <len) {var filesName = files [I]. name; var extStart = filesName. lastIndexOf (". "); var ext = filesName. substring (extStart, filesName. length ). toUpperCase (); if (ext! = ". JPG" & ext! = ". PNG" & ext! = ". XML") {// determine whether the request type is required. TS. errorAlert ("Select. jpg).png and. xml for uploading! "); Return false;} else {test (files [I]);} I ++;} $ (". parent-dlg "). show () ;} function test (a) {var formData = new FormData (); formData. append ("name",. name); formData. append ("size",. size); formData. append ("data", a); $. ajax ({url: '', type: 'post', data: formData, cache: false, processData: false, contentType: false, xhr: function () {var xhr = $. ajaxSettings. xhr (); if (onprogress & xhr. upload) {xhr. upload. addEventListener ("progress", onprogress, false); return xhr ;}})}; function onprogress (evt) {var loaded = evt. loaded; // The uploaded size. var tot = evt. total; // total attachment size var per = Math. floor (100 * loaded/tot); // percentage of uploaded files $ (". progress-label ").html (per +" % "); $ (". son ").css (" width ", per +" % "); if (per> = 100) {$ (". parent-dlg "). hide ();}}

Progress bar css:

.parent-dlg{position: absolute;width:400px; height:20px; border:1px solid #aaaaaa;border-radius:3px;top:30%;left:50%;z-index:9999;margin-left:-200px;display:none;}.parent-dlg .progress-label{position: absolute;left: 50%;top: 4px;font-weight: bold;text-shadow: 1px 1px 0 #fff;} .parent-dlg .son {width:0; height:100%; background-color:#cccccc; text-align:center; line-height:20px; font-size:16px; font-weight:bold;} 

This content is only a rough technical direction for file upload. You can make improvements based on your project!

Summary

The above is the jquery Implementation of the drag file upload and loading progress bar function introduced by the small Editor. I hope it will be helpful to you. If you have any questions, please leave a message. The small editor will reply to you in time!