H5 formData实现批量ajax上传文件

最新推荐文章于 2023-04-13 09:46:48 发布

荡頭

最新推荐文章于 2023-04-13 09:46:48 发布

阅读量2k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zhoubo5692/article/details/78227667

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

话不多说，直接上代码，亲测可用。

<!DOCTYLE html>
<html>
    <head>
        <meta charset='utf-8'>
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <form id='upload_files'>
            <input type="file" name='pic[]' multiple>
            <input type="submit">
        </form>
    </body>
</html>

<script type="text/javascript">
    $(function () {
        $('#upload_files').submit(function () {
            var data = new FormData($('#upload_files')[0]);
            $.ajax({
                 url: './batchFileUploadAjax',//上传路径
                 type: 'POST',
                 data: data,
                 dataType: 'JSON',
                 cache: false,
                 processData: false,
                 contentType: false,
                 success: function (data) {
                     console.log(data);
                 }
            });

            return false;
      });
});
</script>

html表单中加了multiple属性，可以批量上传
以PHP为例，去batchFileUploadAjax文件打印$_FILES即有数据，处理即可

荡頭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5 formData实现批量ajax上传文件

话不多说，直接上代码<!DOCTYLE html><html> <head> <meta charset='utf-8'> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> </head><body>
复制链接

扫一扫