HTML:
<form action="{{ path("image_gallery",{"id":id}) }}" method="post" enctype="multipart/form-data" >
<label for="files">Select multiple files: </label>
<input name="images[]" id="files" type="file" multiple/>
<input type="submit" name="submit" id="upload" value="submit" class="btn btn-fit-height green-soft" style="margin-top:10px" disabled />
</form>
<output id="result" style="display: -webkit-box;" />
jquery的:
<script>
$('#files').change(function () {
var input = this;
var limit = 6;
var alreadyuploadedimage = '{{imagecount}}';
var allowedimage = limit - alreadyuploadedimage;
if (allowedimage == 0) {
this.value = '';
$('#msg').text("You can upload maximum 6 images and you have already uploaded 6 images.");
$(".requiredFieldsError").show();
$('#upload').attr('disabled', true);
}
if (allowedimage < parseInt(input.files.length)) {
this.value = '';
$('#msg').text("You can upload maximum 6 images and you have already uploaded " + alreadyuploadedimage + " images.please upload remaining images");
$(".requiredFieldsError").show();
$('#upload').attr('disabled', true);
}
if (parseInt(input.files.length) > 6) {
this.value = '';
$('#msg').text("Please upload maximum 6 images");
$(".requiredFieldsError").show();
$('#upload').attr('disabled', true);
}
for (i = 0; i < input.files.length; i++)
{
var ext = input.files[i].name.match(/\.(.+)$/)[1];
switch (ext) {
case 'jpg':
case 'jpeg':
case 'png':
case 'gif':
case 'JPG':
case 'JPEG':
case 'PNG':
case 'GIF':
$('#upload').attr('disabled', false);
$(".requiredFieldsError").hide();
break;
default:
this.value = '';
$('#msg').text("Please upload image with valid format");
$(".requiredFieldsError").show();
$('#upload').attr('disabled', true);
//alert('This is not an allowed file type.');
}
}
});
//Check File API support
if (window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function (event) {
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++)
{
var file = files[i];
//Only pics
if (!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load", function (event) {
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
"title='" + picFile.name + "'/>";
output.insertBefore(div, null);
});
//Read the image
picReader.readAsDataURL(file);
}
});
}
else
{
console.log("Your browser does not support File API");
}
</script>
我上传图片后(最多允许6张)。并重新加载页面文件输入没有被清除,它再次上传。如何在上传文件后清除文件输入? 任何人都可以帮助我吗?
答案 0 :(得分:0)
尝试添加:
<input name="images[]" id="files" value="" type="file" multiple/>
每次加载时,默认情况下都会将输入设置为空。