Question

所以我不会将jQuery用于所有事情，但是我确实将它用于AJAX这样的好东西，而现在那个枪的儿子正在给我一些问题。下面是一个代码，可以在上传时更改我的上传进度条。

function uploadProgess(){
    var info = document.getElementById('infor');
    var images = document.getElementsByName('file[]')[0].files; 
    $.ajax({
        beforeSend: function(XMLHttpRequest){
            XMLHttpRequest.upload.addEventListener("progress", function(evt){
                if (evt.lengthComputable) {
                    document.getElementById('progress-bar').style.display="block";
                    var percentComplete = (evt.loaded / evt.total * 100) + '%';
                //Do something with upload progress
                    document.getElementById('progress').style.width = percentComplete;
                }
            }, false); 
        },
        type: 'POST',
        url: "administration.php?mode=styling&part=pics_management",
        data:{method:"upload",file:images},
        success: function(response) {
            info.innerHTML = response;
        },
        error:function(response){
            info.innerHTML = response;
        }
        }).done(function(){
        window.location.href = window.location.href;
    });
}

当我们点击表单的提交按钮时，会调用此函数。

$('#upload_images').click(function(e){
 e.preventDefault();
 uploadProgess();
 });

但是我得Uncaught TypeError: Illegal invocation jQuery.js:4不知道我做了什么来援引另一个财产或我做了什么＆＃34;非法＆＃34;有人可以解释我的代码中有什么问题吗？

Answer 1

这对我来说非常合适...注释在其他用户的代码中

function uploadProgess(){
    //cache our "info" popup element
    var info = document.getElementById('infor');
    //cache our input element
    var images = document.getElementsByName('file[]')[0];   
    //create a new FormData object (HTML5)
    var fileData = new FormData();
    //append type is upload
    fileData.append("type","upload");
    //append method is ajax (only allow ajax uploads)
    fileData.append("method","ajax");
    //get the files from the input element
    var files = images.files;
    //loop through the files
    for(i=0;i<files.length;i++){
        //append to the fileData with name of `file[]` and then the files object for each image
        fileData.append('file[]',files[i]);
    }
    //new ajax request
    var request = new XMLHttpRequest();

    //event listener progress
    request.upload.addEventListener('progress',function(event){
        if(event.lengthComputable){
            //cache the progress bar
            var progress = document.getElementById('progress-bar');
            //get our percentage
            var percent = (Math.round(event.loaded / event.total) * 100) +"%";
            //make the progress bar visible
            progress.style.display="block";
            //recache for the spinning bar inside progress
            progress = document.getElementById('progress');
            //change it's width to the percentage of upload
            progress.style.width = percent;
        }
    });
    //add event for when the progress is done
    request.upload.addEventListener('load',function(event){
        //cache progress bar
        var progress = document.getElementById('progress-bar');
        //hide the progress bar
        progress.style.display="none";
    });
     //for errors we'll use the info element but for now console log it
    request.upload.addEventListener('error',function(event){
        console.log(event);
    });
    //open the request
    request.open("POST","{URL}");
    //set the request header for no caching
    request.setRequestHeader("Cache-Control","no-cache");
    //send the data
    request.send(fileData);
}

Ajax使用jQuery上传进度条

1 个答案: