diyupload插件：批量图片上传

最新推荐文章于 2021-12-06 07:44:30 发布

原创

最新推荐文章于 2021-12-06 07:44:30 发布 · 1.8w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#批量图片上传

本文介绍了如何使用diyupload插件进行批量图片上传。通过引入相关文件，点击上传后，该插件会将图片上传到服务器，并在后台的fileUploadAction中处理。之后，数据会被存入数据库并返回JSON数据。在Struts框架中，需要拦截请求并在ACTION中处理响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：
这里写图片描述
借鉴：http://www.jqueryfuns.com/resource/1082
1、引入文件插件
2、对div控件重写（插件实现）

// 初始化上传图片插件
    $('#upload_bottom1').diyUpload({
        url : 'fileUploadAction',
        success : function(data) {
   
   
            $.ajax({
                async : false,
                url : "addProductImg",
                data : {
                    prodId : prodId,
                    imgUrl : data.message,
                    type : 1,
                    sort : 1
                },
                dataType : "JSON",
                type : "POST",
                success : function(result) {
   
   
                    if (result > 0) {
                        getPic(1);
                    }
                }
            });
        },
        error : function(err) {
   
   
            alert(err);
        },
        buttonText : '选择文件',
        chunked : true,
        // 分片大小
        chunkSize : 512 * 1024,
        // 最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
        fileNumLimit : 50,
        fileSizeLimit : 500000 * 1024,
        fileSingleSizeLimit : 50000 * 1024,
        accept : {}
    });

//点击上传后执行：
这里写图片描述

/////分析：执行了两个操作：
（1）、上传图片都服务器：fileUploadAction
////相应：
这里写图片描述
//stucts拦截请求，

<action name="fileUploadAction" class="yamadv.com.upload.FileAction">
               <result type="json" name="success">
                   &

最低0.47元/天解锁文章

200万优质内容无限畅学