大家好我输入文件多个问题。 我想在将它们上传到服务器之前验证我的文件,所以我正在尝试构建一个"好文件阵列"并使用那些好的值克隆原始输入...但它不起作用......我的数组是空的,没有提交文件...因为我在jquery中非常棒,我可以'单独解决这个问题:/
这是html:
<input id="creativeSelect" name="creativeSelect[]" type="file" multiple="multiple" />
<div id="alert"></div>
<table id="dvPreview"></table>
和jquery部分:
if (typeof selectedCreative == "undefined" || !(selectedCreative instanceof Array)) { selectedCreative = []; }
function handleFileSelect(evt) {
var files = evt.target.files;
var filesArr = Array.prototype.slice.call(files);
for (var i = 0, f; f = files[i]; i++) {
var goUpload = true;
if (!f.name.match(/(?:gif|jpg|png|bmp)$/)) {
$('<p class="bg-danger">'+ f.name +' must be an image file only</p>').appendTo('#alert').delay(5000).queue(function() { $(this).remove(); });
goUpload = false;
}
if (f.size > 307200) { // 300k
$('<p class="bg-danger">'+ f.name +' is too big, max size allowed is 300kb</p>').appendTo('#alert').delay(5000).queue(function() { $(this).remove(); });
goUpload = false;
}
if (goUpload) {
var myobject = filesArr[i];
selectedCreative.push(myobject);
var reader = new FileReader();
reader.onload = (function (theFile) {
return function (e) {
// Render thumbnail.
var name = theFile.name;
var size = Math.floor(theFile.size/1024);
var img = document.createElement("img");
var imgsrc = e.target.result;
img.src = imgsrc;
var w = img.width;
var h = img.height;
var tr = document.createElement('tr');
tr.innerHTML = ['<td><img src="', imgsrc, '" title="', escape(name), '"/></td><td>', escape(name), '</td><td>', escape(w), ' x ', escape(h), '</td><td>', escape(size), 'ko </td>'].join('');
document.getElementById('dvPreview').insertBefore(tr, null);
};
})(f);
reader.readAsDataURL(f);
}
}
var input = $('#creativeSelect');
input.replaceWith(input.val('').clone(true));
input.val(selectedCreative);
}
document.getElementById('creativeSelect').addEventListener('change', handleFileSelect, false);
我正在尝试过滤文件,如果它们符合我的标准,goUpload循环应该将它们存储到selectedCreative数组中,并且在文件的末尾我尝试克隆选择并用selectedCreative数组填充它。 ..
抱歉我的英语很差:)