0

我有一个页面，允许用户编辑他们之前提交的属性列表。我一直在使用 bootstrap-fileinput 来允许用户添加图像，它会使用 initialPreview 属性来显示他们已经上传的图像。用户可以删除 initialPreview 图像以从 dropzone 中删除图像，但我找不到将此信息传递给服务器的方法，因为用户已删除了这些 initialPreview 图像。

我试过 uploadExtraData: function() {} 但我无法获得有关 initialPreview 图像的任何信息。另外，我正在为我的网站使用 Laravel 5.7 PHP 框架。

<div class="form-group">
    <label for="additional_info" class="col-lg-12 control-label">Add Photos to Attract Lender Interest</label>
    <div class="col-lg-12">
        <input type="file" name="image[]" id="image" multiple class="image" data-overwrite-initial="false"
               data-min-file-count="0" value="{{ $mortgage->close_date}}">
    </div>
</div>
{{-- Scripts for the pretty file input plugin called bootstrap-fileinput --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.2/themes/fas/theme.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $("#image").fileinput({
        overwriteInitial: false,
        initialPreview: [
            // IMAGE DATA
            "http://digitalbroker.test/storage/properties/847%20Queen%20Street%20West,%20Toronto,%20ON,%20Canada_1.JPG",
            // IMAGE DATA
            "http://digitalbroker.test/storage/properties/847%20Queen%20Street%20West,%20Toronto,%20ON,%20Canada_2.JPG",
        ],
        initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
        initialPreviewFileType: 'image', // image is the default and can be overridden in config below
        initialPreviewDownloadUrl: 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/{filename}', // includes the dynamic `filename` tag to be replaced for each config
        showUpload: false,
        theme: 'fas',
        uploadUrl: "/submit-mortgage",
        uploadExtraData: function () {
            return {
                _token: $("input[name='_token']").val(),
            };
        },
        allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],
        overwriteInitial: true,
        showCaption: false,
        showRemove: true,
        maxFileSize: 5000,
        maxFilesNum: 8,
        fileActionSettings: {
            showRemove: true,
            showUpload: false,
            showZoom: true,
            showDrag: false,
        },
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
</script>

现在它只是在提交时删除所有旧图像，并保存所有新上传的图像。我想同时跟踪哪些 initialPreview 图像没有被删除，以及哪些新图像被上传。

4

1 回答 1

0

我知道这是一个较老的问题，但对于那些偶然发现它的人来说，这是一个解决方案：

当用户单击initialPreview框架上的删除按钮时，您可以通过添加附加选项将信息从该框架传递到服务器，fileinput每次单击删除按钮时都会进行 Ajax 调用。

使用上面的问题，您需要添加：

initialPreviewConfig: [
   {
  // This is passed to the server in the request body as key: 0
     key: 0, 

  // This is the url that you would send a POST request to that will handle the call.
     url: 'http://www.example.com/image/remove', 

  // Any extra data that you would like to add to the POST request
     extra: {
         key: value
     }
   }
]

您需要为initialPreview数组中的每个项目创建一个对象。

OP.fileinput将变为：

$("#image").fileinput({
        overwriteInitial: false,
        initialPreview: [
            // IMAGE DATA
            "http://digitalbroker.test/storage/properties/847%20Queen%20Street%20West,%20Toronto,%20ON,%20Canada_1.JPG",
            // IMAGE DATA
            "http://digitalbroker.test/storage/properties/847%20Queen%20Street%20West,%20Toronto,%20ON,%20Canada_2.JPG",
        ],
        initialPreviewConfig: [
            {
               key: 0,
               url: '/image/remove', //custom URL
               extra: {
                   image: '847 Queen Street West, Toronto, ON, Canada_1.JPG
               }
             },
            {
               key: 1,
               url: '/image/remove', //custom URL
               extra: {
                   image: 847 Queen Street West, Toronto, ON, Canada_2.JPG
               }
             },
        ],
        initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
        initialPreviewFileType: 'image', // image is the default and can be overridden in config below
        initialPreviewDownloadUrl: 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/{filename}', // includes the dynamic `filename` tag to be replaced for each config
        showUpload: false,
        theme: 'fas',
        uploadUrl: "/submit-mortgage",
        uploadExtraData: function () {
            return {
                _token: $("input[name='_token']").val(),
            };
        },
        allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],
        overwriteInitial: true,
        showCaption: false,
        showRemove: true,
        maxFileSize: 5000,
        maxFilesNum: 8,
        fileActionSettings: {
            showRemove: true,
            showUpload: false,
            showZoom: true,
            showDrag: false,
        },
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });

我希望这可以帮助任何遇到它的人。

仅供参考，这是我对 SO 的第一个回答（请善待：P）

于 2019-09-26T12:45:58.850 回答