支持目前主流浏览器ie,firefox,chrome(已测试过)
需要引用jquery
<link href="../ajaxload/styles.css" rel="stylesheet" type="text/css" />
<script src="../ajaxload/js/ajaxupload.3.5.js" type="text/javascript"></script>
插件可以到http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/ 下载
js代码:
$(function () {
var btnUpload = $('#upload');
var status = $('#status');
new AjaxUpload(btnUpload, {
action: 'upload.aspx',
//Name of the file input box
name: 'filedata',
onSubmit: function (file, ext) {
if (!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))) {
// check for valid file extension
status.text('Only JPG, PNG or GIF files are allowed');
return false;
}
status.text('Uploading...');
},
onComplete: function (file, response) {
//On completion clear the status
status.text('');
var temp = eval('(' + response + ')'); //转json
//Add uploaded file to list
if (temp.err == "") {
//$('<li></li>').appendTo('#files').html('<img src="./uploads/' + file + '" alt="" /><br />' + file).addClass('success');
$('#imgurl').val(temp.msg.url);
$('#preview').prop("src", temp.msg.url);
} else {
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
});
})
</script>
服务器返回数据格式:(可以自己控制)
{'err':'success','msg':{url:'图片路径'}}
html代码:
<div id="txtdiv">
<input type="text" id="imgurl" class="uploadtext" /></div>
<div id="upload">
上传文件</div>
<span id="status"></span>
<!--List Files-->
<ul id="files">
</ul>