Ubuntu server10.10下安装配置SVN

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 <jyeary@bluelotussoftware.com>.
*  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 <jyeary@bluelotussoftware.com>
* @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>