How do I change the list of uploaded files?

I am attempting to use XMLHttpRequest to upload files to the server. Here are the steps I would like the code to do: 1. List the file in a file list ul 2. Upload the file(s) while displaying a progress bar 3. When the file is completely uploaded, change the list item for that file to a link without the progress bar. This is where I am having a problem. Here is the HTML code I am working with:

Upload Files

    Here is the javascript code I am working with: function transferFailed(evt) { alert("An error occurred while transferring the file."); } function transferCanceled(evt) { alert("The transfer has been canceled by the user."); } var filelist = $('#filelist');//define where the list of files will go var url = "/"; function handleFileSelect_inputfield(evt) { var files = evt.target.files; // FileList object // run through each file individually. for (var i = 0, f; f = files[i]; i++) { var li = $("
  • " + f.name + " (" + f.type +") - " + f.size + " bytes
  • "); filelist.append(li);//put the file in the filelist var formData = new FormData(); formData.append(f.name, f); //upload through xmlhttprequest var xhr = new XMLHttpRequest(); xhr.upload.li = li; xhr.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { var percentLoaded = Math.round((e.loaded / e.total) * 100); // Increase the progress bar length. if (percentLoaded < 100) { this.li.find(".progress_bar").addClass('loading'); this.li.find(".percent").width(percentLoaded + '%'); } } }, false); xhr.upload.addEventListener("load", function(e) { //uploading is complete }, false); xhr.upload.addEventListener("error", transferFailed, false); xhr.upload.addEventListener("abort", transferCanceled, false); xhr.open('POST', url, true); xhr.responseType = 'text'; xhr.onload = function(e) { if (this.readyState==4){ if (this.status == 200) { //console.log(this.response); console.log("finished=" + li);//returns as an object //console.log("filename=" + f.name);//error: cannot read property 'name' of undefined //change the list item. Not working... this.li.find("li").html("" + f.name + ""); } } }; xhr.send(formData); // multipart/form-data } } document.getElementById('doc_upload_field').addEventListener('change', handleFileSelect_inputfield, false); Everything seems to be working, but when I want to change the list item, li, it is not recognizing it. I am able to change the progress bar length by calling: this.li.find(".progress_bar").addClass('loading'); this.li.find(".percent").width(percentLoaded + '%'); But when I want to change the list item: this.li.find("li").html("" + f.name + ""); It does not work. Does anyone know why it would find it when changing the progress bar, but not find it after it is uploaded?

    以上就是How do I change the list of uploaded files?的详细内容,更多请关注web前端其它相关文章!

    赞(0) 打赏
    未经允许不得转载:web前端首页 » JavaScript 答疑

    评论 抢沙发

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    前端开发相关广告投放 更专业 更精准

    联系我们

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信扫一扫打赏