AjaxUpload实现前台上传文件
最近一直在烦恼怎么在前台实现无刷新上传文件,在网上查看了很多方法后觉得有两种方法比较合意,一种是html5 javascript API,但是由于目前浏览器对html5的支持还不是很好,便放弃了。还有一种就是JQuery的控件AjaxUpload.js,但是只实现了单个文件上传,想实现多文件上传,但一直无果。如果大家有好的方法实现多文件上传,欢迎指教!
下面分享一下自己做的,希望对大家有所帮助。
Default.aspx:
首先引入js文件
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<script src="ajaxupload.js" type="text/javascript"></script>
<style type="text/css">
.btnsubmit
{
border-bottom: #cc4f00 1px solid;
border-left: #ff9000 1px solid;
border-top: #ff9000 1px solid;
border-right: #cc4f00 1px solid;
text-align: center;
padding: 2px 10px;
line-height: 16px;
background: #e36b0f;
height: 24px;
color: #fff;
font-size: 12px;
cursor: pointer;
}//www.heatpress123.net
</style>
<script type="text/javascript">
$(function() {
var button = $('#btnUp');
var interval;
var uploadObj = new AjaxUpload(button, {
action: 'AjaxuploadHandler.ashx', //要提交到的处理页面
name: 'myfile', //提交的名字
type:"POST",//提交方式
onChange: function(file, ext) {//当选择文件后执行的方法,ext存在文件后续,可以在这里判断文件格式
if (!(ext && /^(jpg|jpeg|JPG|JPEG)$/.test(ext))) {
alert('图片格式不正确,请选择 jpg 格式的文件!', '系统提示');
return false;
}
$("#text").val(file);
},
autoSubmit: false, //设置不自动上传
onSubmit: function(file, ext) {//上传文件
button.text('上传中');
this.disable();
interval = window.setInterval(function() {
var text = button.text();
if (text.length < 10) {
button.text(text + '.');
} else {
button.text('上传中');