如何删除“input type=file”多个特定值？

Question

我正在使用支持多文件上传的input标签，同时也有只能上传单个文件的input标签。例如：

//single image
//IMAGE_TYPES is constant and defined with:define('IMAGE_TYPES',array('main','floor','bedroom1','bedroom2','bedroom3','kitchen','reception','garages','epc','other'));
@foreach(IMAGE_TYPES as $images)
    @if($images!='other')
    <div class="col-sm-10">
        <input type="file" class="form-control" id="{{$images}}_image" name="{{$images}}_image" accept="image/*" placeholder="<span> <i class='fa fa-plus-circle'></i>Click here or drop files to upload</span>"/>
    </div>
    @else
    //multiple
    <div class="col-sm-10">
        <input type="file" class="form-control" id="other_images" name="other_images[]" accept="image/*" placeholder="<span> <i class='fa fa-plus-circle'></i>Click here or drop files to upload</span>" multiple />
    </div>
    @endif
@endforeach

现在，我使用jQuery进行验证，如下所示：

var image_type ='<?=json_encode(IMAGE_TYPES);?>';
image_type = JSON.parse(image_type);
var max_image_size = 2;
$.each(image_type, function( index, value ) {
  if (value!='other') {
    $('#'+value+'_image').bind('change', function() {
      var a=(this.files[0].size);
      var ValidImageTypes = ["image/jpeg", "image/png"];
      if ($.inArray(this.files[0].type, ValidImageTypes) < 0) {
        show_notification('error','Only .jpg/.jpeg and .png file allowed. Please select other image.');
        var file = document.getElementById(value+'_image');
        file.value = file.defaultValue;
        return false;
      }
      else{
        if (Math.round(a / (1024 * 1024)) > max_image_size) {
          show_notification('error','Image is Greater than '+max_image_size+'MB. Please select smaller image.');
          var file = document.getElementById(value+'_image');
          file.value = file.defaultValue;
          return false;
        }
        else
        {
          preview_main_image(value);//won't matter
        }
     }
    });
  }
  else{
    $('#other_images').bind('change', function() {
      $('div.add_preview').remove();//won't matter
      for (var i = 0; i < $("#other_images").get(0).files.length; i++) { 
        var a=(this.files[i].size);
        var name = this.files[i].name;
        var ValidImageTypes = ["image/jpeg", "image/png"];
        if ($.inArray(this.files[i].type, ValidImageTypes) < 0) {
          show_notification('error','Image '+name+' is Not allowed. Only .jpg/.jpeg and .png file allowed. Please select other image.');
        }
        else{
          if (Math.round(a / (1024 * 1024)) > max_image_size) {
            show_notification('error','Image '+name+' is Greater than '+max_image_size+'MB. Please select smaller image.');
          }
          else
          {
            $('#other_image_preview').append("<div class='col-md-2 p_3 add_preview'><img class='img-responsive' src='"+URL.createObjectURL(event.target.files[i])+"'></div>");//won't matter
            //preview_detail_images(value);
          }
        }
      }
    });
  }
});

现在，我的问题是当我使用单个图像时，如果图像不适合验证，则我会使用以下代码从input type ='file'中删除其值。

var file = document.getElementById(value+'_image');
file.value = file.defaultValue;
return false;

但是当我选择多张图片而其中某些图片不符合验证条件时，我该如何从中移除这些特定的图片呢？请帮助我。

- Divyesh Jesadiya

---

一个很棒的上传插件：dropzone.js。 - PajuranCodes

Answer 1

文件必须在元素中才能触发更改处理程序。您可以在那里验证并仅显示有效文件以进行预览，忽略无效文件。 您可以检查jQuery文件上传器：https://blueimp.github.io/jQuery-File-Upload/ 您可以将输入保持不可见，并覆盖另一个

，这是您的预览，并在

中显示已上传的文件，以向用户传达您正在丢弃无效文件的假象。

- yeshashah

Answer 2

答案很简单：你不能。 <input type="file"> 的files属性的值是一个FileList，出于安全原因，它是不可变的。此外，files属性是只读的，你无法构造一个FileList。

你能做的最好的事情是：a) 向用户显示验证错误并要求他删除文件；b) 在处理过程中忽略文件（例如预览、上传到服务器）。

正如@mixable在他的回答中指出的那样，验证也应该在后端进行。

- jelhan

Answer 3

你好，请查看我的fiddle。我创建了一个表单，可以自动提交有效文件。

https://jsfiddle.net/2ah5r0bj/135/

我所做的基本上是：

var form = document.getElementById("myAwesomeForm");
var formDataToUpload = new FormData(form);

...

for (var i = 0; i < validFiles.length; i++) {
  formDataToUpload.append("other_images[]", validFiles[i], validFiles[i].name);
}

var xhr = createCORSRequest("POST", "https://httpbin.org/post");
xhr.send(formDataToUpload);

- pegasuspect

Answer 4

在处理上传的文件时，您可以在服务器上忽略此文件类型。这是更安全的解决方案，因为依赖于 JavaScript 很容易将篡改的数据发送到您的服务器并上传其他图像文件类型（甚至包括脚本文件，如 js、php 等）。

- mixable