qq_26929957
Cc_Davis_cC
2016-08-23 07:30

XMLHttpRequest对象向服务器(servlet)发出请求,服务端如何接收

5

/**
* 页面上显示需要上传的文件
* @private
*/
function _showUploadFile(file)
{
var reader = new FileReader();
console.log(file)
// console.log(reader);

    //判断文件类型
    if (file.type.match(/image*/))
    {
        reader.onload = function (e)
        {
            var formData = new FormData();
            console.info("1:"+formData);
            console.info(formData);
            var li = $("#template li").clone();
            var img = li.find("img");
            var progress = li.find(".progress");
            var percentage = li.find(".percentage");
            percentage.text("0%");
            img.attr("src", e.target.result);
            $("ul", $(_uploadEle)).append(li);
            $(_uploadEle).find("li").size() == 10 && $(_uploadEle).width(($(_uploadEle).width() + 8) + "px").css("overflow", "auto");
            console.info(file);
            //formData.uploadFile = file;
            formData.append("uploadFile", file);

            //上传文件到服务器
            _uploadToServer(formData, li, progress, percentage);

        };
        reader.readAsDataURL(file);
    }
    else
    {
        console.log("此" + file.name + "不是图片文件!");
    }
}

/**
 * 上传文件到服务器
 * @private
 */
function _uploadToServer(formData, li, progress, percentage)
{
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://localhost:8080/html5Upload/FileUploadServlet.html", true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest', 'Content-Type', 'multipart/form-data;');
    //HTML5新增的API,存储了上传过程中的信息
    xhr.upload.onprogress = function (e)
    {
        var percent = 0;
        if (e.lengthComputable)
        {
            //更新页面显示效果
            percent = 100 * e.loaded / e.total;
            progress.height(percent );
            percentage.text(percent + "%");
            percent >= 100 && li.addClass("done");
        }
    };
    xhr.send(formData);
}
注:xhr.send(content);--向服务器发出请求,如果采用异步方式,该方法会立即返回。content可以指定为null表示不发送数据,其内容可以是DOM对象,输入流或字符串。 
  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

5条回答

为你推荐

换一换