Question

我有一个页面，允许用户编辑他们先前提交的财产清单。我一直在使用bootstrap-fileinput来允许用户添加图像，它将使用initialPreview属性显示他们已经上传的图像。用户可以删除initialPreview图像以从放置区中删除图像，但是我找不到将此信息传递给服务器的方法，因为用户已删除了这些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图像和上载了哪些新图像。

Answer 1

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

当用户单击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）

如何在bootstrap-fileinput中传递initialPreview数据

1 个答案: