sillycat
- 浏览: 2539681 次
- 性别:
- 来自: 成都
-
文章分类
最新评论
-
nation：
你好，在部署Mesos+Spark的运行环境时，出现一个现象， ...
Spark(4)Deal with Mesos -
sillycat：
AMAZON Relatedhttps://www.godad ...
AMAZON API Gateway(2)Client Side SSL with NGINX -
sillycat：
sudo usermod -aG docker ec2-use ...
Docker and VirtualBox(1)Set up Shared Disk for Virtual Box -
sillycat：
Every Half an Hour30 * * * * /u ...
Build Home NAS(3)Data Redundancy -
sillycat：
3 List the Cron Job I Have>c ...
Build Home NAS(3)Data Redundancy
AjaxFileUpload(1)Simple File Upload Sample
1. Maven Configuration
The jar dependecies in pom.xml are as follow:
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.7</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>1.3.2</version>
</dependency>
2. Addtional Spring Configuration
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="104857600"/>
<property name="maxInMemorySize" value="4096"/>
<property name="defaultEncoding">
<value>UTF-8</value>
</property>
</bean>
3. My JavaScript and HTML page
<html>
<head>
<title>AjaxFileUpload Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./resources/component/ajaxfileupload/2.1/ajaxfileupload.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#filemaps").change(function(){
var file_upl = document.getElementById('filemaps');
var realpath = getPath(file_upl);
$("#fileurl").val(realpath);
});
});
function userBrowser(){
var browserName=navigator.userAgent.toLowerCase();
if(/msie/i.test(browserName) && !/opera/.test(browserName)){
return "IE";
}else if(/firefox/i.test(browserName)){
return "Firefox";
}else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
return "Chrome";
}else if(/opera/i.test(browserName)){
return "Opera";
}else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
return "Safari";
}else{
return "unKnow";
}
}
function getPathIE(obj){
obj.select();
return document.selection.createRange().text;
}
function getPathFFSecurity(obj){
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}catch (e) {
alert('Unable to access local files due to browser security settings. To overcome this, follow these steps: (1) Enter "about:config" in the URL field; (2) Right click and select New->Boolean; (3) Enter "signed.applets.codebase_principal_support" (without the quotes) as a new preference name; (4) Click OK and try loading the file again.');
if(obj.files){
return obj.files.item(0).name;
}
return;
}
return obj.value;
}
function extractFilename(path) {
if (path.substr(0, 12) == "C:\\fakepath\\")
return path.substr(12); // modern browser
var x;
x = path.lastIndexOf('/');
if (x >= 0) // Unix-based path
return path.substr(x+1);
x = path.lastIndexOf('\\');
if (x >= 0) // Windows-based path
return path.substr(x+1);
return path; // just the filename
}
function getPath(obj){
if(obj){
//if (window.navigator.userAgent.indexOf("MSIE")>=1){
if(userBrowser() == 'IE'){
return getPathIE(obj);
//}else if(window.navigator.userAgent.indexOf("Firefox")>=1){
}else if(userBrowser() == 'Firefox'){
return getPathFFSecurity(obj);
}else if(userBrowser() == 'Chrome'){
return extractFilename(obj.value);
}
return obj.value;
}
}
function ajaxFileUpload(){
$.ajaxFileUpload(
{
url:'fileupload.do',
secureuri:false,
fileElementId:'filemaps',
dataType: 'json',
success: function (data, status)
{
console.info(data);
$('#result').html('Success to Add');
},
error: function (data, status, e)
{
$('#result').html('Fail to Add');
}
}
);
}
</script>
</head>
<body>
<h2>AjaxFileUpload Demo</h2>
<form method="post" action="fileupload.do" enctype="multipart/form-data">
<input id="fileurl" type="text" class="langtext" readonly="readonly"/>
<input type="file" id="filemaps" name="filemaps" value="upload"/>
<input type="button" value="Submit" onclick="ajaxFileUpload()"/>
</form>
<div id="result"></div>
</body>
</html>
Because of the security reason, a lot of browser does not support to get the full local path of the file.
4. Java File to handler the binary file
package com.sillycat.easytalker.controller;
import java.io.IOException;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
@Controller
public class FileController {
private static final Logger logger = Logger.getLogger(FileController.class);
@RequestMapping("/fileupload.do")
public void uploadFile(MultipartHttpServletRequest request,
HttpServletResponse response) throws IOException {
MultipartFile multipartFile = request.getFile("filemaps");
if (null != multipartFile
&& null != multipartFile.getOriginalFilename()) {
logger.info("orginal file name = "
+ multipartFile.getOriginalFilename());
// OutputStream os = null;
// InputStream is = null;
// try {
// is = multipartFile.getInputStream();
// File file = new File("D:/"
// + multipartFile.getOriginalFilename());
// os = new FileOutputStream(file);
//
// byte[] b = new byte[1024];
// int len = 0;
// while ((len = is.read(b)) != -1) {
// os.write(b, 0, len);
// }
// } catch (Exception e) {
// logger.error("Error Message:" + e);
// } finally {
// os.close();
// is.close();
// }
}
}
}
references:
http://www.phpletter.com/Our-Projects/AjaxFileUpload/
http://springking.iteye.com/blog/198452
http://demos.telerik.com/aspnet-ajax/upload/examples/clientsidevalidation/defaultcs.aspx
http://www.phpletter.com/Demo/AjaxFileUpload-Demo/
http://yunzhu.iteye.com/blog/1116893
http://hi.baidu.com/2012betterman/item/48d2592c2d79059db73263a9
http://www.cnblogs.com/zorroLiu/archive/2011/08/31/2160858.html
http://mzhou.me/?p=95250
1. Maven Configuration
The jar dependecies in pom.xml are as follow:
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.7</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>1.3.2</version>
</dependency>
2. Addtional Spring Configuration
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="104857600"/>
<property name="maxInMemorySize" value="4096"/>
<property name="defaultEncoding">
<value>UTF-8</value>
</property>
</bean>
3. My JavaScript and HTML page
<html>
<head>
<title>AjaxFileUpload Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./resources/component/ajaxfileupload/2.1/ajaxfileupload.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#filemaps").change(function(){
var file_upl = document.getElementById('filemaps');
var realpath = getPath(file_upl);
$("#fileurl").val(realpath);
});
});
function userBrowser(){
var browserName=navigator.userAgent.toLowerCase();
if(/msie/i.test(browserName) && !/opera/.test(browserName)){
return "IE";
}else if(/firefox/i.test(browserName)){
return "Firefox";
}else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
return "Chrome";
}else if(/opera/i.test(browserName)){
return "Opera";
}else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
return "Safari";
}else{
return "unKnow";
}
}
function getPathIE(obj){
obj.select();
return document.selection.createRange().text;
}
function getPathFFSecurity(obj){
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}catch (e) {
alert('Unable to access local files due to browser security settings. To overcome this, follow these steps: (1) Enter "about:config" in the URL field; (2) Right click and select New->Boolean; (3) Enter "signed.applets.codebase_principal_support" (without the quotes) as a new preference name; (4) Click OK and try loading the file again.');
if(obj.files){
return obj.files.item(0).name;
}
return;
}
return obj.value;
}
function extractFilename(path) {
if (path.substr(0, 12) == "C:\\fakepath\\")
return path.substr(12); // modern browser
var x;
x = path.lastIndexOf('/');
if (x >= 0) // Unix-based path
return path.substr(x+1);
x = path.lastIndexOf('\\');
if (x >= 0) // Windows-based path
return path.substr(x+1);
return path; // just the filename
}
function getPath(obj){
if(obj){
//if (window.navigator.userAgent.indexOf("MSIE")>=1){
if(userBrowser() == 'IE'){
return getPathIE(obj);
//}else if(window.navigator.userAgent.indexOf("Firefox")>=1){
}else if(userBrowser() == 'Firefox'){
return getPathFFSecurity(obj);
}else if(userBrowser() == 'Chrome'){
return extractFilename(obj.value);
}
return obj.value;
}
}
function ajaxFileUpload(){
$.ajaxFileUpload(
{
url:'fileupload.do',
secureuri:false,
fileElementId:'filemaps',
dataType: 'json',
success: function (data, status)
{
console.info(data);
$('#result').html('Success to Add');
},
error: function (data, status, e)
{
$('#result').html('Fail to Add');
}
}
);
}
</script>
</head>
<body>
<h2>AjaxFileUpload Demo</h2>
<form method="post" action="fileupload.do" enctype="multipart/form-data">
<input id="fileurl" type="text" class="langtext" readonly="readonly"/>
<input type="file" id="filemaps" name="filemaps" value="upload"/>
<input type="button" value="Submit" onclick="ajaxFileUpload()"/>
</form>
<div id="result"></div>
</body>
</html>
Because of the security reason, a lot of browser does not support to get the full local path of the file.
4. Java File to handler the binary file
package com.sillycat.easytalker.controller;
import java.io.IOException;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
@Controller
public class FileController {
private static final Logger logger = Logger.getLogger(FileController.class);
@RequestMapping("/fileupload.do")
public void uploadFile(MultipartHttpServletRequest request,
HttpServletResponse response) throws IOException {
MultipartFile multipartFile = request.getFile("filemaps");
if (null != multipartFile
&& null != multipartFile.getOriginalFilename()) {
logger.info("orginal file name = "
+ multipartFile.getOriginalFilename());
// OutputStream os = null;
// InputStream is = null;
// try {
// is = multipartFile.getInputStream();
// File file = new File("D:/"
// + multipartFile.getOriginalFilename());
// os = new FileOutputStream(file);
//
// byte[] b = new byte[1024];
// int len = 0;
// while ((len = is.read(b)) != -1) {
// os.write(b, 0, len);
// }
// } catch (Exception e) {
// logger.error("Error Message:" + e);
// } finally {
// os.close();
// is.close();
// }
}
}
}
references:
http://www.phpletter.com/Our-Projects/AjaxFileUpload/
http://springking.iteye.com/blog/198452
http://demos.telerik.com/aspnet-ajax/upload/examples/clientsidevalidation/defaultcs.aspx
http://www.phpletter.com/Demo/AjaxFileUpload-Demo/
http://yunzhu.iteye.com/blog/1116893
http://hi.baidu.com/2012betterman/item/48d2592c2d79059db73263a9
http://www.cnblogs.com/zorroLiu/archive/2011/08/31/2160858.html
http://mzhou.me/?p=95250
分享到：
发表评论
-
MongoDB 2019(3)Security and Auth
2019-11-16 06:48 232MongoDB 2019(3)Security and Aut ... -
Memory Leak in NodeJS
2018-12-20 06:26 723Memory Leak in NodeJS I have d ... -
Remote Desktop Client
2018-12-07 13:19 1186Remote Desktop Client There is ... -
MetaBase UI Console(2)Docker on MySQL
2018-11-29 06:58 939MetaBase UI Console(2)Docker on ... -
AWS Lambda and Serverless Timeout
2018-09-20 01:20 625AWS Lambda and Serverless Timeo ... -
2018 WebSocket(1)Introduction
2018-03-20 01:22 11032018 WebSocket(1)Introduction ... -
2018 TypeScript Update(3)Introduction Basic Grammar
2018-03-08 03:08 6002018 TypeScript Update(3)Introd ... -
2018 TypeScript Update(2)Introduction Basic Grammar - Classes and Functions
2018-03-06 05:32 5512018 TypeScript Update(2)Introd ... -
2018 TypeScript Update(1)Introduction Basic Grammar - Types and Interface
2018-03-03 01:15 5992018 TypeScript Update(1)Introd ... -
Charts and Console(6)Paging
2018-03-01 00:12 577Charts and Console(6)Paging Th ... -
Vue.JS(3)Google Login
2018-02-14 04:53 1296Vue.JS(3)Google Login I just p ... -
Vue.JS(2)Monitor Water Console - ChartJS and Axios
2018-02-14 03:17 718Vue.JS(2)Monitor Water Console ... -
Vue.JS(1)Introduction and Basic Demo
2018-02-08 06:47 604Vue.JS(1)Introduction and Basic ... -
Charts and Console(5)Validation Form
2017-10-03 05:12 804Charts and Console(5)Validation ... -
Charts and Console(4)Display and Enhancement
2017-09-20 05:39 631Charts and Console(4)Display an ... -
Charts and Console(3)Auth and Login
2017-09-13 03:45 659Charts and Console(3)Auth and L ... -
Charts and Console(2)Login and Proxy
2017-08-31 05:39 874Charts and Console(2)Login and ... -
Charts and Console(1)UI Console and RESTful Client
2017-08-29 11:02 766Charts and Console(1)UI Console ... -
Blog Project(2)Express Backend API - istanbul - mocha - bunyan
2017-06-09 00:05 473Blog Project(2)Express Backend ... -
ReactJS(5)Composition vs Inheritance
2017-06-06 05:55 1106ReactJS(5)Composition vs Inheri ...
相关推荐
Ajaxfileupload 支持多file上传 兼容IE 返回是File为置空问题 及原有的BUG修改 可直接使用
1. 用户选择文件：用户通过input[type="file"]元素选取待上传的文件。 2. 触发事件：当文件被选中后，AjaxFileUpload.js监听到文件选择事件，开始执行上传操作。 3. 创建XMLHttpRequest：利用JavaScript创建一个新的...
ajaxfileupload.js用于文件上传
总结来说，`jQuery ajax file upload`是通过`ajaxFileUpload`插件实现的一种无刷新的文件上传方式，它提高了用户体验，并且提供了丰富的自定义选项和回调机制，适用于各种Web应用的文件上传需求。要正确使用，需要...
1. 用户选择文件后，JavaScript触发文件上传事件。 2. 插件创建一个XMLHttpRequest实例，用于与服务器进行通信。 3. 发送HTTP请求到服务器，请求通常为POST，包含文件数据和其他可能的参数（如文件名、文件类型等）...
`ajaxFileUpload`是一个JavaScript插件，它允许用户在不刷新页面的情况下实现异步文件上传，提供了更友好的用户体验。然而，在实际应用中，开发者可能会遇到一些问题，如回调函数总是进入error或success状态，这通常...
1. **无需页面刷新**：使用`ajaxFileUpload`，文件上传过程中，页面不会重新加载，用户可以继续进行其他操作。 2. **进度反馈**：可以方便地添加进度条显示文件上传进度，提升用户体验。 3. **错误处理**：异步上传...
1. **Ajax（异步JavaScript和XML）**：Ajax是Web开发的一种技术，它通过在后台与服务器进行少量数据交换，使网页实现部分刷新。这里，AjaxFileUpload使用Ajax技术实现了文件上传时页面的不刷新。 2. **文件上传**：...
jquery ajaxfileupload.js异步上传插件
ajax file upload 0.4.0，基于Java的文件上传组件，支持上传文件进度条显示
### 1. Ajax 文件上传基础 Ajax（Asynchronous JavaScript and XML）技术的核心是利用JavaScript进行异步数据交换，使得网页可以在不重新加载整个页面的情况下与服务器进行通信。在文件上传场景中，Ajax允许我们在...
**Ajax File Upload技术详解** 在Web开发中，Ajax（Asynchronous JavaScript and XML）技术使得页面无需刷新即可实现数据的异步交互，极大地提升了用户体验。"jQuery Ajax File Upload"是Ajax技术在上传文件场景中...
1. **兼容性问题**：老版本的IE浏览器可能不支持AjaxFileUpload，可以考虑使用Flash或Silverlight的解决方案作为备选。 2. **跨域问题**：如果服务器和客户端不在同一个域下，需要配置CORS策略。 3. **文件大小...
$("#fileToUpload").ajaxFileUpload({ url: 'your_server_side_script.php', // 服务器端脚本 secureuri: true, // 是否启用安全的跨域请求 fileElementId: 'fileToUpload', // 文件输入元素的ID dataType: '...
ajaxfileupload.js 这是个非常好的异步上传图片的插件，来解决form表单上传时要刷新页面的问题。支持多文件上传
用ajax上传文件时的工具类，可以给后台提交图片等文件。
<input type="file" id="imageUpload" name="image" /> ``` 接下来，我们需要编写JavaScript代码来初始化`ajaxFileUpload`。首先，引入`ajaxfileupload.js`插件文件，然后创建一个函数来处理文件上传逻辑： ```...
1. **JavaScript**：是AJAX的核心，负责创建XMLHttpRequest对象，编写处理文件选择、发送请求和接收响应的逻辑。 2. **XMLHttpRequest**：这是一个内置在现代浏览器中的API，用于在后台与服务器进行通信。通过它，...