Javascript 如何上传文件并保存到目录？

HTML

<div style="width:200px">
<form action="javascript:_bulkUser();" method="post" enctype="multipart/form-data">  
    Select File:<input type="file" name="fname"/><br/>  
    <input type="submit" value="upload"/>  
</form>

</div>

Servlet

protected void  doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    response.setContentType("text/html"); 
    PrintWriter out = response.getWriter(); 
    System.out.println("working");
    MultipartRequest mp = new MultipartRequest(request, "e:/new");
    out.print("successfully uploaded"); 
}

---

至此，从jQuery使用的当前XMLHttpRequest版本1开始，无法通过XMLHttpRequest使用JavaScript上传文件。常见的解决方法是让JavaScript创建一个隐藏的表单，并将表单提交给它，以便创建一个异步执行的印象。这也是大多数jQuery文件上传插件所做的事情，比如jQuery表单插件（这里的示例）

假设您的带有HTML表单的JSP被重写，这样当客户端禁用JS时（正如您现在所做的…），它就不会被破坏，如下所示：

<form id="upload-form" class="upload-box" action="/Upload" method="post" enctype="multipart/form-data">
    <input type="file" id="file" name="file1" />
    <span id="upload-error" class="error">${uploadError}</span>
    <input type="submit" id="upload-button" value="upload" />
</form>

---

请注意，相对较新的XMLHttpRequest版本2能够使用新的文件和FormData API发送选定的文件。另请参见HTML5文件上载到Java Servlet，并通过xmlHttpRequest以多部分形式发送文件。

此代码对我来说也很好：

$('#fileUploader').on('change', uploadFile);


function uploadFile(event)
    {
        event.stopPropagation(); 
        event.preventDefault(); 
        var files = event.target.files; 
        var data = new FormData();
        $.each(files, function(key, value)
        {
            data.append(key, value);
        });
        postFilesData(data); 
     }

function postFilesData(data)
    {
     $.ajax({
        url: 'yourUrl',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, 
        contentType: false, 
        success: function(data, textStatus, jqXHR)
        {
            //success
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            console.log('ERRORS: ' + textStatus);
        }
        });
    }

<form method="POST" enctype="multipart/form-data">
    <input type="file" name="file" id="fileUploader"/>
</form>

$（'#fileUploader'）。在（'change'，uploadFile'）上；
函数上载文件（事件）
{
event.stopPropagation（）；
event.preventDefault（）；
var files=event.target.files；
var data=new FormData（）；
$.each（文件、函数（键、值）
{
数据。追加（键、值）；
});
postFilesData（数据）；
}
函数postFilesData（数据）
{
$.ajax({
url:“你的url”，
键入：“POST”，
数据：数据，
cache:false，
数据类型：“json”，
processData:false，
contentType:false，
成功：函数（数据、文本状态、jqXHR）
{
//成功
},
错误：函数（jqXHR、textStatus、errorshown）
{
console.log（'ERRORS:'+textStatus）；
}
});
}

对无耻的人投了大量的反对票。站在角落里。当我运行我发布的代码时引发异常严重：Servlet.service（）用于路径为[/eportal]的上下文中的Servlet[com.apptium.eportal.Servlet.FileUploadServlet]引发异常java.io.IOException:发布的内容类型不是多部分/表单数据

<script src="jquery.js"></script>
<script src="jquery.form.js"></script>
<script>
    $(function() {
        $('#upload-form').ajaxForm({
            success: function(msg) {
                alert("File has been uploaded successfully");
            },
            error: function(msg) {
                $("#upload-error").text("Couldn't upload file");
            }
        });
    });
</script>

if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) {
    // Return ajax response (e.g. write JSON or XML).
} else {
    // Return regular response (e.g. forward to JSP).
}

$('#fileUploader').on('change', uploadFile);


function uploadFile(event)
    {
        event.stopPropagation(); 
        event.preventDefault(); 
        var files = event.target.files; 
        var data = new FormData();
        $.each(files, function(key, value)
        {
            data.append(key, value);
        });
        postFilesData(data); 
     }

function postFilesData(data)
    {
     $.ajax({
        url: 'yourUrl',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, 
        contentType: false, 
        success: function(data, textStatus, jqXHR)
        {
            //success
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            console.log('ERRORS: ' + textStatus);
        }
        });
    }

<form method="POST" enctype="multipart/form-data">
    <input type="file" name="file" id="fileUploader"/>
</form>