基于uploadfile的批量上传

最新推荐文章于 2025-11-16 12:51:42 发布

原创最新推荐文章于 2025-11-16 12:51:42 发布 · 421 阅读

1 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用jQuery插件实现的批量文件上传方法。通过引入'jquery_form3.5'和'uploadfile'两个JS文件，利用jQuery.uploadfile.min.js API完成文件上传功能。文章提供了具体的HTML结构和JS代码示例。

基于jquery的一种批量上传的方法

jquery官网里找上传插件uploadfile，里的api jquery.uploadfile.min.js

首先要引入两个js 'jquery_form3.5', 'uploadfile'

直接上马：

html结构：

<div id="fileuploader"></div>

js代码：

$("#fileuploader").uploadFile({
        url:"/service/file/uploadFile",
        fileName:"test",
        uploadStr:'批量上传',
        dragDropStr:false,
        showFileSize:false,
        showFileCounter:false,
        maxFileCount:'10',
        onSuccess:function(files,data,xhr,pd)
        {
            var li_html = '<li><div class="square"></div> <span class="detail_li info_li" data_id="' +
                data.data.file_id + '">' + data.data.name +
                '</span>' +
                '<a href="javascript:void(0);" data-id="' + data.data.file_id + '" class="delet_upload"><img src="/Public/Service/images/deleteIcon.jpg" alt="" class="del_li"></a></li>'
            if(data.code==2000){
                $('.user_upload_list').append(li_html);
            }
        }
    });

css 可以引入js相对应的css

uploadfile.css

然后就ok了，我不喜欢多说无用，都是工作中总结的