使用 Ajax 上传文件？答案

【问题标题】：File Uploading using Ajax?使用 Ajax 上传文件？
【发布时间】：2013-08-08 15:00:51
【问题描述】：

我正在使用 Impromptu Api 用于包含 html 表单的对话框的网页：

            html = '<label>Name&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="fname" name="fname" value="'+STUDENT_NAME+'"></label><br />'
                        + '<label>Sex<select id="sex"> <option value="m" >Male</option>   <option value="f" selected>Female</option>'
                        + '</select>'
                        + '</label><br />'
                        + '<label>Category<select id="cat"> <option value="a">A</option>   <option value="b" selected>B</option>'
                        + '</select>' + '</label>'+
                        '<input type="file" id="logo">'+ 
                        '<br />';

像这样使用 Ajax 提交表单：

         $.ajax({
                        url : 'AddStudent.jsp',
                        data : 'classId=' +
                                 <%=class_id%>
                                + '&name='
                                + document.getElementById('fname').value
                                + '&cat='
                                + document.getElementById('cat').value
                                + '&func=del' + '&sex='
                                + document.getElementById('sex').value,
                        type : 'post',
                        success : function(msg) {
                                              //events}

我有上传这样的文件的代码：

             String saveFile = "";
  String contentType = request.getContentType();
  if ((contentType != null) && (contentType.indexOf("multipart/form-data") >= 0)) {
        DataInputStream in = new DataInputStream(request.getInputStream());
        int formDataLength = request.getContentLength();
        byte dataBytes[] = new byte[formDataLength];
        int byteRead = 0;
        int totalBytesRead = 0;
        while (totalBytesRead < formDataLength) {
              byteRead = in.read(dataBytes, totalBytesRead, formDataLength);
              totalBytesRead += byteRead;
        }
        String file = new String(dataBytes);
        saveFile = file.substring(file.indexOf("filename=\"") + 10);
        saveFile = saveFile.substring(0, saveFile.indexOf("\n"));
        saveFile = saveFile.substring(saveFile.lastIndexOf("\\") + 1, saveFile.indexOf("\""));
        int lastIndex = contentType.lastIndexOf("=");
        String boundary = contentType.substring(lastIndex + 1, contentType.length());
        int pos;
        pos = file.indexOf("filename=\"");
        pos = file.indexOf("\n", pos) + 1;
        pos = file.indexOf("\n", pos) + 1;
        pos = file.indexOf("\n", pos) + 1;
        int boundaryLocation = file.indexOf(boundary, pos) - 4;
        int startPos = ((file.substring(0, pos)).getBytes()).length;
        int endPos = ((file.substring(0, boundaryLocation)).getBytes()).length;
        saveFile = "D:/SERVERE/" + saveFile;
        File ff = new File(saveFile);
        FileOutputStream fileOut = new FileOutputStream(ff);
        fileOut.write(dataBytes, startPos, (endPos - startPos));
        fileOut.flush();
        fileOut.close();

  }

但这不适用于 Ajax 方法。我希望文件必须在同一页面上上传。如何使用 Ajax 或有任何其他技术来完成此操作？请帮助

【问题讨论】：

标签： javascript jquery ajax impromptu

【解决方案1】：

如果您可以使用 HTML5 文件 API 和 FormData 对象。

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress',function(ev){
    console.log((ev.loaded/ev.total)+'%');
}, false);
xhr.onreadystatechange = function(ev){
    // Blah blah blah, you know how to make AJAX requests
};
xhr.open('POST', url, true);
var files = document.getElementById('logo').files;
var data = new FormData();
for(var i = 0; i < files.length; i++) data.append('file'+i, files[i]);
xhr.send(data);

您可以执行 data.append('name', document.getElementById('name')) 等来附加所有其他表单字段。

【讨论】：