ajaxfileupload实现文件异步上传

最新推荐文章于 2024-09-17 13:42:29 发布

子沭

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量877

点赞数

分类专栏： javascript 文章标签： jquery javascript ajax ajaxfileupload file

本文链接：https://blog.csdn.net/ktlifeng/article/details/50484835

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先需要下载js文件，提供一个CSDN的下载地址

http://download.csdn.net/detail/aa5000ac/5945203

其依赖于jquery，需要自行下载jquery.js文件

页面布局：

<html lang="zh-CN">
<head>
    <script src="/assets/js/vendor/jquery.js"></script>
    <script src="/assets/js/vendor/ajaxfileupload.js"></script>
</head>
<body>
    <form id="form2" action="/system/upload" enctype="multipart/form-data" method="post">
        <input type="file" id="file" name="file">
    </form>
</body>
</html>

JS代码如下：

<script>
    function ajaxFileUpload() {
        $.ajaxFileUpload({
            url:'/system/upload',
            secureuri:false,
            fileElementId:'file', //注意1
            dataType: 'JSON',//注意2
            success: function (data, status) {
                alert(data)
            },
            error: function (data, status, e) {
            }
        });
    }

    $(function(){
        $("#file").on('change',function(){
            ajaxFileUpload();
        });
    })
</script>

其中需要注意的两点：

注意1 ：file指向文件上传的input 即

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

其中name为必须，否则会出现后台接收不到文件的情况

注意2：dataType的值必须为大写，否则在chrome下回出现handlerError的异常，但是小写的"text"的例外。

在chrome下，ajax返回的JSON数据会出现多余的 “<pre style="word-wrap: break-word; white-space: pre-wrap;">” 现象，下面给出一个简易的处理方式

success: function (data, status) {
                var index1 = data.indexOf("{");
                var index2 = data.lastIndexOf("}");
                data = data.substring(inde1,inde2+1);
            },