Cc_Davis_cC 2016-08-23 07:30 采纳率: 0%
浏览 3443
已结题

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

/**
* 页面上显示需要上传的文件
* @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条回答 默认 最新

  • 泰 戈 尔 博客专家认证 2016-08-25 12:47
    关注

    Ajax起初设计的理念就是方便异步实时无刷新的更新页面,所以其open的时候对应的url地址是该servlet相对于

    服务器上的地址,服务器上的地址,服务器上的地址(重要的事情说三遍)。这个文件说白了和普通的处理表单请求的文件没什么区别,就一个servlet即可

    不能写其他网站上的url请求地址,因为ajax是避免了跨域请求的。希望能给你点思路。

    评论

报告相同问题?

悬赏问题

  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?
  • ¥15 错误 LNK2001 无法解析的外部符号
  • ¥50 安装pyaudiokits失败
  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候,驱动要重新装才能使用,怎么解决?
  • ¥15 让node服务器有自动加载文件的功能
  • ¥15 jmeter脚本回放有的是对的有的是错的
  • ¥15 r语言蛋白组学相关问题