如何使用jQuery上传文件？

Question

I want to upload a file using jQuery and to store in a folder on the server. I don't know how to get started. The file path also needs to be stored in an Oracle database. My entire scenario is based on the Entity Framework. Does anyone have any idea of how to solve this?

Answer 1

Use this plugin for jquery file uploading.

http://www.uploadify.com/

OR, use this --

http://blueimp.github.com/jQuery-File-Upload/

OR, Find some more decent plugins at --

http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/

Answer 2

you can upload file easily using iframe in jquery if you don't wanna to use any plugin. I was facing that problem from many days now I have resolved that.

$(document).ready(function () {
    $("#formsubmit").click(function () {       

        var iframe = $('<iframe name="postframe" id="postframe" class="hidden" src="about:none" />');         

        $('div#iframe').append(iframe);        

        $('#theuploadform').attr("action", "/ajax/user.asmx/Upload")
        $('#theuploadform').attr("method", "post")
        $('#theuploadform').attr("userfile", $('#userfile').val())
        $('#theuploadform').attr("enctype", "multipart/form-data")
        $('#theuploadform').attr("encoding", "multipart/form-data")
        $('#theuploadform').attr("target", "postframe")         
        $('#theuploadform').submit();
        //need to get contents of the iframe
        $("#postframe").load(
            function () {
                iframeContents = $("iframe")[0].contentDocument.body.innerHTML;
                $("div#textarea").html(iframeContents);
            }
        );



<div id="uploadform">
    <form id="theuploadform" action="">
        <input id="userfile" name="userfile" size="50" type="file" />
        <input id="formsubmit" type="submit" value="Send File" />
    </form>
</div>

<div id="iframe" style="width: 0px; height: 0px; display: none;">
</div>

<div id="textarea">
</div>

It will upload file. Now only thing remaining is to receive that file on your server.I have used servlet to get file and after that I called one service. That example will work for every file image,text,docx,doc etc.

Servlet:

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
    ServletFileUpload upload = new ServletFileUpload();
    response.setContentType("text/plain"); 
    //response.setContentType("application/msword");


    FileItemIterator iterator = upload.getItemIterator(request);

    while (iterator.hasNext()) {
        FileItemStream item = iterator.next();
        String filename = item.getName();
        InputStream stream = item.openStream();
        //more here you wanna to do with that file do.
    }
} 
catch (FileUploadException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
}

Enjoy...