XMLHttpRequest页面无刷新上传文件

来源:互联网 发布:软件测试员工资怎么样 编辑:程序博客网 时间:2024/05/18 16:37

<input onchange="fileSelected(this);" type="file"/>


function fileSelected(userfile) {

    uploadFile(userfile);
}
function uploadFile(userfile) {
    var fd = new FormData();
    fd.append("file",userfile.files[0]);//文件追到到FormData
    fd.append("folders_name","dzkb/12");
    fd.append("operation","update_image");
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    xhr.open("POST", "http://img.myxinhai.cn:8081/upload_img.php");
    xhr.send(fd);
}
//图片上传进度
function uploadProgress(evt) {
    if (evt.lengthComputable) {
        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
        if(percentComplete < 100)layer.load();
        else layer.closeAll();
        console.log(percentComplete) ;
        }else {
            
        }
}
//图片上传完成
function uploadComplete(evt) {
    var json = eval('(' + evt.target.responseText + ')');
    //图片上传完成服务器相应
    console.log(json) ;
}
function uploadFailed(evt) {
    alert("上传失败");
}
function uploadCanceled(evt) { //
    alert("已经取消上传");
}

原创粉丝点击