jquery combined with HTML5 implementation file upload

This article introduces the use of jquery using HTML5 formdata attributes to upload the file method and example, very practical, there is a need for small partners to refer to.

1. Using jquery to use HTML5 's Formdata attribute to implement file upload

In HTML5 before we need to implement file upload server functions, sometimes we have to rely on flash to achieve, and in the arrival of HTML5, we are very easy to upload the file, only to take advantage of the HTML5 of a formdata attribute, Combined with jquery It is easy to upload the file, and read the file upload progress, the following upload case is based on the above mentioned implementation, I will all of the JS and CSS and HTML page code below.

Note: The Formdata attribute must be dependent on HTML5, so if you follow the functionality implemented by this code, the browser must be upgraded to the latest (Support HTML5 formdata attribute).

The 2.HTML page code is as follows

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The

The 3.CSS code is as follows:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

/* Source header information: <copyright file= "Fileupload.js" > Copyright (c) 2014-2034 kencery.all rights. Personal blog: Http://www.cnblogs.com/hanyinglong Creator: Han Guanlong (kencery) Date created: 2015-6-24 </copyright>*/body {font-family: " Microsoft James Black "; font-size:12px; }. input-file {overflow:hidden; position:relative; input-file input {opacity:0; Filter:alpha (opacity=0); font-siz e:100px; Position:absolute; top:0; right:0; } #uploadTable {width:500px; border-collapse:collapse; border:1px solid Silver;}

The 4.JS code is as follows:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30-31 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 The 96 97 98 99 100 101 102 103 104 105 106 107 108 109 112 113 114

SOURCE header information://<copyright file= "fileupload.js" >//Copyright (c) 2014-2034 kencery.all rights. Created by: Han Guanlong (kencery)//Creation time: 2015-6-24//</copyright>; (function ($) {$.fn. Salesmoundupload = function (options) {var defaults = {saveurl: ', Jqinput: ', maxsize:1024 * 1024 *,//100m Fnrem Ove: ',//Remove file, parameter: FileName fncomplete: '//per file success, parameter: Server-side return content}; var opt = $.extend (defaults, options); Function Getbytetom (val) {if (isNaN (Val)) return val; val = val/(1024 * 1024); val = Math.Round (val *)/MB retur n Val; Return This.each (function () {var $this = $ (this); $this. empty (); if (typeof FormData = = ' undefine ') {alert (' browser version is too low Hold the change upload! '); Return ///Header if ($this. Find (' thead '). Length = = 0) {var $thead = $ (' <thead> '); var $th _tr = $ (' <tr> '); $th _tr.append (' <th> filename </th> '); $th _tr.append (' <th> type </th> '); $th _tr.append (' <th> size </th> '); $th _tr.append (' <th> status </th> '); $th _tr.append (' <th> operation </th> '); $th _tr.appendto ($thead); $this. Append ($thead); } opt.jqinput[0].addeventlistener (' Change ', function (e) {var file = This.files[0]; if (!file) {return;} if (File.size & Gt Opt.maxsize) {window.alert (' file exceeds maximum '); return; var fd = new FormData (); var $table = $this; Fd.append ("UploadFile", file); var xhr = new XMLHttpRequest (); Xhr.open (' POST ', Opt.saveurl, true); Xhr.upload.addEventListener ("Progress", uploadprogress, false); Xhr.addeventlistener ("Load", Uploadcomplete, false); Xhr.addeventlistener ("Error", uploadfailed, false); Xhr.addeventlistener ("Abort", uploadcanceled, false); Contents var $tr = $ (' <tr> ') in the table; $tr. Append (' <td class= ' upload_name ' > ' + file.name + ' </td> '); $tr. Append (' <td class= ' upload_type ' > ' + file.type + ' </td> '); $tr. Append (' <td class= ' upload_size ' > ' + getbytetom (file.size) + ' M ' + ' </td> '); $tr. Append (' <td class= ' upload_status ' > ' + 0 + ' </td> '); $tr. Append (' <td class= "upload_action" ><a href= "JavascripT:void (0); " > ' + ' Cancel ' + ' </a></td> '); $tr. Find ('. Upload_action a '). Unbind (' click '). Bind (' click ', Function () {Xhr.abort ();}); $table. Append ($TR); function Uploadprogress (evt) {if (evt.lengthcomputable) {var percentcomplete = Math.Round (evt.loaded * 100/evt.total); $tr. Find ('. Upload_status '). HTML (Math.Round (percentcomplete) + '% '); else {$tr. Find ('. Upload_status '). HTML (' Unable to compute ');} function Uploadcomplete (evt) {if (Evt.target.status =) {$tr. Find ('. Upload_status '). html (' completed '); $tr. Find ('. Upload_action a '). html (' delete '); if (typeof opt.fncomplete = = ' function ') {opt.fncomplete (evt.target.response);} $tr. Find ('. Upload_action '). Unbind (' Click '). Bind (' click ', RemoveFile); The function uploadfailed () {$tr. Find ('. Upload_status '). html (' <a href= ' javascript:void (0); " >x</a> '); $tr. Find ('. Upload_status a '). Unbind (' click '). Bind (' click ', Function () {$tr. Remove ();}); $tr. Find ('. Upload_action a '). html (' Retry '); $tr. Find ('. Upload_action a '). Unbind (' CLICK '). Bind (' click ', Function () {xhr.send (FD);}); function uploadcanceled () {$tr. Remove ();} function RemoveFile () {$tr. Remove (); if (typeof opt.fnremove = = ' function ') {Opt.fnremove (file.name);}} Xhr.send (FD); }, False); }); }; } (JQuery));

5. Code View address: https://github.com/kencery/Common/tree/master/KenceryCommonMethod/%E6%96%87%E4%BB%B6%E4%B8%8A%

E4%bc%a0

The above mentioned is the entire content of this article, I hope you can enjoy.