Javascript jspajax不使用表单上传文件，不使用jquery

我需要上传一个图像文件到服务器使用JSP

这里我使用的是纯Ajax而不是Jquery。另外，我没有使用表单进行提交，因为我不想刷新当前页面

这是我试过的

page1.jsp

<table width="60%" border="0" cellspacing="1" cellpadding="1" align="center" class="style1">    
<tr>  
  <td align="left"><b>Select a file to upload :</b></td>  
</tr>  
<tr>  
  <td align="left">  
    <input type="file" name="file" id="listfile" onchange="readURL(this);">  
    </td>  
</tr>  
<tr>  
  <td align="left">  
    <input type="submit" value="SUBMIT" />
    </td>  
</tr>  
</table>
<script>
function readURL(input) 
{
    if (input.files && input.files[0]) 
    {
        var reader = new FileReader();
        reader.onload = function (e) 
        {
            $('#img_prev').attr('src', e.target.result).width("25%").height("25%");
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>

<%@ page import="java.io.*,javax.servlet.http.HttpServletRequest,javax.servlet.ServletInputStream" %>  
<%@ page import="java.io.FileWriter,java.io.IOException" %>  
<%  
    String savePath = "", filepath = "", filename = "";  
    String contentType = "", fileData = "", strLocalFileName = "";  
    int startPos = 0, endPos = 0;  
    int BOF = 0, EOF = 0;  
%>  
<%! void copyByte(byte [] fromBytes, byte [] toBytes, int start, int len)  
    {  
        for(int i=start;i<(start+len);i++)  
        { 
                toBytes[i - start] = fromBytes[i]; 
        }  
    }  
%>  
<%    
    contentType = request.getContentType();  
    out.println("<br>Content type is :: " +contentType);  
    if ((contentType != null) && (contentType.indexOf("multipart/form-data") >= 0))   
    {  
        DataInputStream in = new DataInputStream(request.getInputStream());  
        DataInputStream in1 = in;  
        int formDataLength = request.getContentLength();  
        byte dataBytes[] = new byte[formDataLength];  
        int byteRead = 0;  
        int totalBytesRead = 0;  
        while (totalBytesRead < formDataLength)  
        {     
            byteRead = in1.read(dataBytes, totalBytesRead, formDataLength);  
            totalBytesRead += byteRead;  
        }  
        out.println("<br>totalBytesRead : " + totalBytesRead + "    :   formDataLength = " + formDataLength);  

        byte[] line = new byte[128];  
        if (totalBytesRead < 3)   
        {  
          return;   //exit if file length is not sufficiently large  
        }  
        String boundary = "";  
        String s = "";  
        int count = 0;        
        int pos = 0;  
        do  
        {  
            copyByte(dataBytes, line, count ,1);    //read 1 byte at a time  
            count+=1;  
            s = new String(line, 0, 1);  
            fileData = fileData + s;  
            pos = fileData.indexOf("Content-Disposition: form-data; name=\"");  
            if(pos != -1)  
                endPos = pos;  
        }while(pos == -1);  
        boundary = fileData.substring(startPos, endPos);  
        startPos = endPos;  
        do  
        {  
            copyByte(dataBytes, line, count ,1);    //read 1 byte at a time  
            count+=1;  
            s = new String(line, 0, 1);  
            fileData = fileData + s;  
            pos = fileData.indexOf("filename=\"", startPos); //set the file name  
            if(pos != -1)  
                startPos = pos;  
        }while(pos == -1);                    
        do  
        {  
            copyByte(dataBytes, line, count ,1);    //read 1 byte at a time  
            count+=1;  
            s = new String(line, 0, 1);  
            fileData = fileData + s;  
            pos = fileData.indexOf("Content-Type: ", startPos);  
            if(pos != -1)  
                endPos = pos;                         
        }while(pos == -1);  
        filename = fileData.substring(startPos + 10, endPos - 3);  
        strLocalFileName = filename;
        String[] NewName = filename.split("\\.");
        out.println("Original File Name is:"+filename);%><br><%
        String rename = "newName";
        String NewName1 = rename+"."+NewName[1];
        out.println("New File Name is:"+NewName1);%><br><%
        filename = NewName1;
        int index = NewName1.lastIndexOf("\\");  
        if(index != -1) 
        { 
%>
<script language="javascript">
    alert("File already Exists!");
</script>
<%          
            NewName1 = NewName1.substring(index + 1);  
        }
        else
        {
            NewName1 = NewName1;
        }
        boolean blnNewlnFlag = false;  
        startPos = endPos;  //added length of "Content-Type: "  
        do  
        {  
            copyByte(dataBytes, line, count ,1);
            count+=1;  
            s = new String(line, 0, 1);  
            fileData = fileData + s;              
            pos = fileData.indexOf("\n", startPos);  
            if(pos != -1)  
            {  
                if(blnNewlnFlag == true)  
                    endPos = pos;                     
                else  
                {  
                    blnNewlnFlag = true;  
                    pos = -1;  
                }  
            }  
        }while(pos == -1);  
        contentType = fileData.substring(startPos + 14, endPos);  
        BOF = count + 1;  
        do  
        {  
            copyByte(dataBytes, line, count ,1);    //read 1 byte at a time  
            count+=1;  
            s = new String(line, 0, 1);  
            fileData = fileData + s;  
            pos = fileData.indexOf(boundary, startPos);           
        }while(pos == -1);  
        EOF = count - boundary.length();  
        out.println("<br><br>0. Local File Name = " + strLocalFileName);  
        out.println("<br><br>1. FILE-NAME-CHANGE = " + NewName1);  
        out.println("<br>2. contentType = " + contentType);  
        out.println("<br>3. startPos = " + BOF);  
        out.println("<br>4. endPos = " + EOF);  
        out.println("<br>5. boundary = " + boundary); 
        String appPath = application.getRealPath("/");  
        out.println("<br>appPath : " + appPath);  
        String destFolder = appPath + "images/";    //change this as required  
        NewName1= destFolder + NewName1;  
        FileOutputStream fileOut = new FileOutputStream(NewName1);  
        fileOut.write(dataBytes, BOF, (EOF - BOF));  
        fileOut.flush();  
        fileOut.close();  
        out.println("<br>File saved as >> " + NewName1);          
    }  
    else  
    {  
        out.println("Error in uploading ");  
    }  
%>

---

在不刷新整个页面的情况下进行上载的任何其他方式

不可能在没有表单的情况下上载文件。（你需要一个表单，而不是一个普通的提交按钮。）抵制jquery是浪费时间。您将被同化。@developerwjk，所以我需要使用“表单”上传文件。但是有没有其他方法可以在不刷新整个页面的情况下上传文件呢？使用Ajax，您可以使用一个没有

的表单，然后使用一个名为

FormData

的类来获取表单的数据并用Ajax发送。请看，您可以在不调用正常http提交的情况下使用表单。@developerwjk，这会停止刷新整个页面吗？谢谢您的响应。是的，使用Ajax而不是刷新页面，您可以用javascript返回响应，因此以jQuery为例，您可以看到

success:function（data）{…}

：数据是来自服务器的响应，您必须用javascript对其进行处理（您也可以忽略它）。顺便说一句，您不应该从同一个页面向自身发送Ajax请求……创建另一个页面来处理Ajax的后端。

                         **or**