webapi上传文件

必须组件

jquery.min.js和jquery.form.js

<div class="demo">

<p>说明：示例中只允许上传gif/jpg格式的图片，图片大小不能超过500k。</p>

<div class="btn">

<span>添加附件</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(){ //选择文件

$("#myupload").ajaxSubmit({

dataType: 'json', //数据格式为json

beforeSend: function() { //开始上传

showimg.empty(); //清空显示的图片

progress.show(); //显示进度条

var percentVal = '0%'; //开始进度为0%

bar.width(percentVal); //进度条的宽度

percent.html(percentVal); //显示进度为0%

btn.html("上传中..."); //上传按钮显示上传中

},

uploadProgress: function(event, position, total, percentComplete) {

var percentVal = percentComplete + '%'; //获得进度

bar.width(percentVal); //上传进度条宽度变宽

percent.html(percentVal); //显示上传进度百分比

},

success: function(data) { //成功

//获得后台返回的json数据，显示文件名，大小，以及删除按钮

files.html("<b>"+data.name+"("+data.size+"k)</b>

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

//显示上传后的图片

var img = "http://demo.helloweba.com/upload/files/"+data.pic;

showimg.html("<img src='"+img+"'>");

btn.html("添加附件"); //上传按钮还原

},

error:function(xhr){ //上传失败

btn.html("上传失败");

bar.width('0');

files.html(xhr.responseText); //返回失败信息

}

});

});

...

});

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