我正在使用输入类型='文件'多个文件和一个单个文件。等,
//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);
}
}
}
});
}
});
现在,我的问题是当我使用单张图片时,如果图片不适合验证,那么我会从输入类型=&#39;文件&#39;中删除它的值。使用,此代码
var file = document.getElementById(value+'_image');
file.value = file.defaultValue;
return false;
但是当我选择多个图像并且如果任何图像不适合验证时,我该如何从输入类型=&#39; file&#39;中删除该特定图像。
请帮帮我
答案 0 :(得分:1)
该文件必须放入input
元素中,input
更改处理程序才能正常工作。您可以在那里进行验证,并在预览中仅显示有效文件,而忽略无效文件。
您可以检查jQuery文件上传器:https://blueimp.github.io/jQuery-File-Upload/
您可以使输入内容在另一个div(即预览)上不可见,并在div中显示上载的文件,以使用户对您正在丢弃无效的文件有一种错觉。
答案 1 :(得分:1)
答案很简单:您不能。 files
的{{1}}属性的值是<input type="file">
。出于安全原因,这是一成不变的。此外,FileList
属性是只读的,您不能构造files
。
您能做的最好是:a)向用户显示验证错误,并要求他删除文件; b)在处理(例如预览,上传到服务器)时忽略文件。
正如@mixable在其答案中已经指出的那样,验证也应该在后端进行。
答案 2 :(得分:0)
处理上传的文件时,您可以忽略服务器上的此文件类型。这是更好的解决方案,因为它更安全。当您依赖JavaScript时,很容易将操纵数据发送到您的服务器并上传其他图像的文件类型(甚至是js
,php
,...等脚本。
答案 3 :(得分:0)
嗨,请检查我的小提琴。我创建了一个可以自动提交有效文件的表单。
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);