当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - File Upload Length Error (...files.length)

问题描述:

I'm trying to create a multi-file upload system, however the length property of the fileInput.files.length is undefined.

Uncaught TypeError: Cannot read property 'length' of undefined

I have tried adding and removing the square brackets from document.getElementById("file1[]")

Assigning fileInput.files to another variable and calling thatVariable.length

Both did not work.

Since this is a multi file upload system, I need it to be in an array.

HTML CODE:

<form action='/' method='post' enctype="multipart/form-data" id='file'>

<button type="button" onclick="document.getElementById('file1').click(); return false;" class="btn btn-primary" id='choosefile'><span class='glyphicon glyphicon-open-file'></span>&nbsp; Choose File</button><br>

<b id="filename"></b><br>

<input type="text" placeholder="New File Name" id="fileplaceholder">

<input type="file" id="file1" name="file1[]" style="visibility: hidden" onchange="filenameprint()" multiple>

<button type="button" onclick="uploadCloud()" class='btn btn-success' id='uploadfile'><span class="glyphicon glyphicon-upload"></span>&nbsp;Upload File</button><br>

<br>

<div class="progress">

<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40"

aria-valuemin="0" aria-valuemax="1" style="width:0%" id='progress'>

<span id='uploadpercent'></span>

</div>

</div>

<span id='loaded'></span>

<script>

function filenameprint() {

var file1 = document.getElementById('file1').value;

if (!empty(file1)) {

document.getElementById('filename').innerHTML = file1;

} else {

document.getElementById('filename').innerHTML = "No File Chosen"

}

}

</script>

</form>


Javascript Code:

function uploadCloud() {

//Sets the Progress Bar to 0

_('progress').style.width = "0%";

//Get's the Upload File Button Object Reference

var fileInput = document.getElementsByName("file1[]");

var formData = false;

//Declares the Form Data Object

if (window.FormData) {

formData = new FormData();

}

var file, reader;

console.log((fileInput.files).length);

for (var i = 0; i < fileInput.files.length; i++) {//ERROR COMES FROM HERE!!!

file = fileInput.files[i];

if (window.FileReader) {

reader = new FileReader();

reader.onloaded = function (e) {

}

reader.readAsDataURL(file);

}

if (formData) {

formData.append('file1', file);

}

}

if (formData) {

$.ajax({

url: '/uploadCloud.php', //Server script to process data

type: 'POST',

// Form data

data: formData,

//Options to tell jQuery not to process data or worry about content-type.

cache: false,

contentType: false,

processData: false,

xhr: function () { // Custom XMLHttpRequest

var myXhr = $.ajaxSettings.xhr();

if (myXhr.upload) { // Check if upload property exists

myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // For handling the progress of the upload

}

console.log(myXhr);

return myXhr;

},

beforeSend: function () {

_('uploadfile').setAttribute('disabled', 'disabled');

_('choosefile').setAttribute('disabled', 'disabled');

},

//Ajax events

success: function (data) {

if (data == 0) {

_('loaded').innerHTML = "";

_('progress').style.width = "0%";

_('filename').innerHTML = "<b>No File</b>"

} else {

_("filename").innerHTML = data;

}

_('uploadpercent').innerHTML = "";

_('loaded').innerHTML = "";

_('uploadfile').removeAttribute('disabled');

_('choosefile').removeAttribute('disabled');

_('progress').style.width = "0%";

},

});

function progressHandlingFunction(e) {

if (e.lengthComputable) {

_('progress').style.width = (e.loaded / e.total) * 100 + "%";

_('uploadpercent').innerHTML = Math.round((e.loaded / e.total) * 100) + "% complete (" + _('filename').innerHTML + ")";

_('loaded').innerHTML = "Upload " + Math.round((e.loaded / e.total) * 100) + "% complete [" + e.loaded + " bytes loaded of " + e.total + " bytes total]";

}

}

} else {

_("filename").innerHTML = "<b>No File</b>"

}

}

网友答案:

Because

var fileInput = document.getElementsByName("file1[]");

is a collection and you act like it is a single element. You need to reference the individual elements.

fileInput[0].files
分享给朋友:
您可能感兴趣的文章:
随机阅读: