Question

如何显示正在上传的每张图片的进度，就像在facebook上传中一样，

他们有一个<input multiple/>但是在您选择了多个文件后，您可以看到每个图片的进度条，还可以取消上传？..

[！[在此处输入图像说明] [1]] [1]

我尝试了一些ajax xhr来显示进度，并且只能获得所有选定文件的总数。非常感谢您的帮助。

$("body").on('change', '#upload-nw-prod', function(event) {
    event.preventDefault();
    $('#upload-multiple-new-products').submit();
});

$('body').on('submit', '#upload-multiple-new-products', function(event) {
	event.preventDefault();
   var formData = new FormData($(this)[0]);

   $.ajax({
    url: '/nw-product-upload-mod',
    type: 'POST',
    xhr: function() {
        var myXhr = $.ajaxSettings.xhr();
        return myXhr;
    },
    success: function (data) {
                $("#nw-prod-upl-mdl").html(data);
            },
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });

<form id="upload-multiple-new-products" class="pull-right" enctype="multipart/form-data" method="post" action="#">
    <label for="upload-nw-prod" class="btn btn-lg btn-primary">Upload products</label>
     <input id="upload-nw-prod"  multiple="" name="photo[]" type="file" accept="image/*">
     <input name="submit" value="" style="display: none;" type="submit">
</form>

//after submit (image intervention)
$photos = $request->file('photo');
$thumb_th_lgArrs    = [];
foreach ($photos as $key => $photo) {
    $img = Image::make($photo->getRealPath());
    $img->resize(300, 300, function ($constraint) {
        $constraint->aspectRatio();
        $constraint->upsize();
    });
    $img->encode('jpg');
    $img->save($saveDirectory.'/'.$thumb_th_lgArrs[$key]['image_name']);
    $img->reset();
}

Answer 1

在玩了dropzonejs之后，我不知道这个过程非常简单

获取在<input multiple/>
将图片转换为base64
使用ajax单独上传图片
预览正在上传的每张图片的进度

但我也建议dropdownjs很容易实现

jquery ajax多文件上传检查每个文件的进度

1 个答案: