Webapi Uploading Files

Required Components

Jquery.min.js and Jquery.form.js

<div class= "Demo" >

<p> Description: Only images in gif/jpg format can be uploaded in the example, the image size cannot exceed 500k. </p>

<div class= "BTN" >

<span> Add Accessories </span>

<input id= "FileUpload" type= "file" name= "Mypic" >

</div>

<div class= "Progress" >

<span class= "Bar" ></span><span class= "percent" >0%</span >

</div>

<div class= "Files" ></div>

<div id= "Showimg" ></div>

</div>


$ (function () {

var bar = $ ('. Bar ');

var percent = $ ('. percent ');

var showimg = $ (' #showimg ');

var progress = $ (". Progress");

var files = $ (". Files");

var btn = $ (". BTN span");

$ ("#fileupload"). Wrap ("<form id= ' myupload ' action= ' action.php '

Method= ' post ' enctype= ' multipart/form-data ' ></form> ');

$ ("#fileupload"). Change (function () {//Select File

$ ("#myupload"). Ajaxsubmit ({

DataType: ' json ',//Data format JSON

Beforesend:function () {//Start uploading

Showimg.empty (); Empty the displayed picture

Progress.show (); Show progress bar

var percentval = ' 0% '; Start Progress is 0%

Bar.width (Percentval); Width of the progress bar

Percent.html (Percentval); Display progress is 0%

Btn.html ("Upload ..."); The upload button shows the crossing

},

Uploadprogress:function (event, Position, total, PercentComplete) {

var percentval = percentcomplete + '% '; Get Progress

Bar.width (Percentval); Upload progress bar width widened

Percent.html (Percentval); Show upload Progress percentage

},

Success:function (data) {//successful

Get JSON data returned in the background, show file name, size, and delete button

Files.html ("<b>" +data.name+ "(" +data.size+ "K) </b>

<span class= ' delimg ' rel= ' "+data.pic+" ' > Delete </span> ');

Display the uploaded image

var img = "http://demo.helloweba.com/upload/files/" +DATA.PIC;

Showimg.html ("

Btn.html ("Add Attachment"); Upload button Restore

},

Error:function (XHR) {//upload failed

Btn.html ("Upload failed");

Bar.width (' 0 ');

Files.html (Xhr.responsetext); Return failure information

}

});

});

...

});

Http://www.1983blue.com/posts/php-jquery-form-js

Webapi Uploading Files