Bootstrap fileinput重复上传同一张图片,已上传成功的图片会被删除

发布于 2022-09-11 23:35:57 字数 2546 浏览 19 评论 0

第一次上传图片显示:
首次上传0.png

第二次再重复选择:
再次上传同一张图片.png

代码实现如下:

//上传文件

    `$("#words").fileinput({
        language: 'zh', //设置语言
        minFileCount: 1, //每次上传允许的最少文件数。如果设置为0,则表示文件数是可选的。默认为0
        maxFileCount: 9, //每次上传允许的最大文件数。如果设置为0,则表示允许的文件数是无限制的。默认为0
        allowedFileExtensions : ['jpg', 'png'],//接收的文件后缀
     //   dropZoneEnabled: false,
   //    showUpload: false,
  //      showCaption: false,
   //    showRemove: false,
    //    autoReplace: true,
        enctype: 'multipart/form-data',
     //   overwriteInitial:false,//不覆盖已上传的图片
  //     previewClass:'preview-file-area',
  //     browseClass: "add-file-btn", //按钮样式
        uploadUrl: '{ms:global.host/}/basic/upload.do', // 服务器端上传处理程序
        uploadExtraData: function(previewId, index) {   //该插件可以向您的服务器方法发送附加数据。这可以通过uploadExtraData在键值对中设置为关联数组对象来完成。所以如果你有设置uploadExtraData={id:'kv-1'},在PHP中你可以读取这些数据$_POST['id']
            var uploadFloderPath ='/upload/works/works';
            return {uploadFloderPath: uploadFloderPath,
                rename:true};
        },
    }).on("filebatchselected", function(event, files) {
        console.log('选择文件后:::::')
        console.log(files)
        if(($('.form-control-file').find('.file-preview-frame').length)*0.5 > 9) {
            showFormText('#words-error','图片最多为9张');
        }else {
            // 选择文件后立即触发上传方法
          $("#words").fileinput("upload");
        }
    }).on("fileuploaded", function (event, data, previewId, index) {//fileuploaded
        List.push({ FileUrl: data.response[0], KeyID: previewId });
        //异步上传成功后唤起的方法
    }).on('filebatchuploaderror',function(event, data){//上传失败唤起方法
        console.log("文件上传出错!请重试");
    }).on('fileclear', function (evt, data,file) {
        List=[];
    }).on('filesuccessremove', function (event, data, previewId, index) {
        for (var i = 0; i < List.length; i++) {
            if (List[i].KeyID == data) {
                List[i].FileUrl='';
                List[i].KeyID='';
            }
        }
    });
    
    
   // 获取imgurl列表
     var imgUrlStr;
        for (var i = 0; i < List.length; i++) {
            if (List[i].FileUrl != '') {
                if(i==0){
                    imgUrlStr=List[i].FileUrl;
                }else {
                    imgUrlStr=imgUrlStr+','+List[i].FileUrl
                }
            }
        }
        $('#imgUrlStr').val(imgUrlStr);
    
    `

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

过去的过去 2022-09-18 23:35:57

名字重复了?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文