日期:2014-05-16  浏览次数:20756 次

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('上传中');