ajax upload 实现文件上传

Ajax Upload; A file upload script with progress-bar, drag-and-drop .

 

An older ajax upload plugin, which only used iframe for uploads, and was licensed under MIT license is located on github. This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere. Demo To upload a file, click on the button below. Drag-and-drop is supported in FF, Chrome. Progress-bar is supported in FF3.6+, Chrome6+, Safari4+

 

More info please refer: valums.com/ajax-upload/

 

这是一个比较好的插件，前端和后端都有实现。前端javascript ajax，后端支持 java 和 php，其他的语言应该也可以支持，但是需要自己实现文件接收。

 

1。 server端 接收文件的 servlet：

 

/*
 *  Copyright 2010 Blue Lotus Software, LLC.
 *  Copyright 2010 John Yeary <[email protected]>.
 *  Copyright 2010 Allan O'Driscoll
 *
 * Dual Licensed MIT and GPL v.2 
 *
 * The MIT License
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 *
 * The GNU General Public License (GPL) Version 2, June 1991
 * This program is free software; you can redistribute it and/or modify it under the terms of the
 * GNU General Public License as published by the Free Software Foundation; version 2 of the License.

 * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
 * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 * See the GNU General Public License for more details.

 * You should have received a copy of the GNU General Public License along with this program;
 * if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
 */
package com.bluelotussoftware.apache.commons.fileupload.example;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.commons.io.IOUtils;

import wavefancy.Utilities;

/**
 * Reads an <code>application/octet-stream</code> and writes it to a file.
 * @author John Yeary <[email protected]>
 * @author Allan O'Driscoll
 * @version 1.0
 */
public class OctetStreamReader extends HttpServlet {

    private static final long serialVersionUID = 6748857432950840322L;
    private static final String DESTINATION_DIR_PATH = "userImg";
    private static String realPath;

    /**
     * {@inheritDoc}
     * @param config
     * @throws ServletException
     */
    @Override
    public void init(ServletConfig config) throws ServletException {
        super.init(config);
        realPath = getServletContext().getRealPath(DESTINATION_DIR_PATH) + "/";
//          realPath = getServletContext().getRealPath(DESTINATION_DIR_PATH); 
//          realPath = realPath.substring(0, realPath.length()-5)+"/userImg/";
    }

    /** 
     * Handles the HTTP <code>POST</code> method.
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException {
//    	System.out.println("Here!");
    	
        PrintWriter writer = null;
        InputStream is = null;
        FileOutputStream fos = null;

        try {
            writer = response.getWriter();
        } catch (IOException ex) {
            log(OctetStreamReader.class.getName() + "has thrown an exception: " + ex.getMessage());
        }
        
        
        String filename = request.getHeader("X-File-Name");
        
        String tempFileName = Long.toString(System.currentTimeMillis()) + filename.substring(filename.lastIndexOf('.'));
        
        //result map
        Map<String, String> reMap = new HashMap<String, String>();
        
        try {
            is = request.getInputStream();
//            System.out.println(realPath); 
            
            File tempFile = new File(realPath+tempFileName);
            
            System.out.println(tempFile.getPath());
            fos = new FileOutputStream(tempFile);

            IOUtils.copy(is, fos);
            response.setStatus(HttpServletResponse.SC_OK);
            
            //store temp image file into httpSession, we will crop it according to user's parameters.
            HttpSession httpSession = request.getSession(true);
            httpSession.setAttribute("tempImg", tempFile);
            
            reMap.put("success", "true");
            reMap.put("tempImg", tempFile.getName());
            writer.print(Utilities.getRawGson().toJson(reMap));
//            writer.print("{success: true}");
        } catch (FileNotFoundException ex) {
            response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
            reMap.put("success", "false");
            writer.print(Utilities.getRawGson().toJson(reMap));
//            writer.print("{success: false}");
            log(OctetStreamReader.class.getName() + "has thrown an exception: " + ex.getMessage());
        } catch (IOException ex) {
            response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
            reMap.put("success", "false");
            writer.print(Utilities.getRawGson().toJson(reMap));
//            writer.print("{success: false}");
            log(OctetStreamReader.class.getName() + "has thrown an exception: " + ex.getMessage());
        } finally {
            try {
                fos.close();
                is.close();
            } catch (IOException ignored) {
            }
        }
//        System.out.println("Done!");
        writer.flush();
        writer.close();
    }
}

 

2。web.xml 配置：

 

	  <servlet>
	     <servlet-name>ImgUpload</servlet-name>
	     <servlet-class>com.bluelotussoftware.apache.commons.fileupload.example.OctetStreamReader</servlet-class>
	  </servlet>
	    <servlet-mapping>
	     <servlet-name>ImgUpload</servlet-name>
	     <url-pattern>/imgUpload.do</url-pattern>
	  </servlet-mapping>

 

3。 web 前端调用

 

<head>
	<!--for file upload-->
	<script src="javascript/fileUploadClient/fileuploader.js"></script>
	<link rel="stylesheet" href="javascript/fileUploadClient/fileuploader.css" />
	<!--end for file upload-->
</head>

 

<head>
<script>
			//------------------ for file upload ----------------
		function createUploader(){            
            var uploader = new qq.FileUploader({
                element: document.getElementById('file-uploader-demo1'),
                action: 'imgUpload.do',
                debug: false,
				allowedExtensions:['jpg','jpeg','png','gif'],
				sizeLimit: 5000000, //5m
				minSizeLimit: 1000, //1k
				onComplete: function(id, fileName, responseJSON){

//					alert(responseJSON.tempImg);
					
					$("#target").attr("src","userImg/"+responseJSON.tempImg);
					$("#preview").attr("src","userImg/"+responseJSON.tempImg);
					
					$("#stepTwo").css({
						display:'block'
					});
					//fire jcrop
					fireJcrop();
					
				}
            });           
        }
        
        // in your app create uploader as soon as the DOM is ready
        // don't wait for the window to load  
        window.onload = createUploader;     
		//--------------------end for file upload----------------------	

</script>
</head>

 

 

 

<body>
		<div id="file-uploader-demo1" style="margin-left:20px;">		
			<noscript>			
				<p>Please enable JavaScript to use file uploader.</p>
				<!-- or put a simple form for upload here -->
			</noscript>         
	    </div>
</body>