使用jquery.upload.js实现异步上传示例代码

2024-11-26 09:38:53

相关资源下载：upload

1:jsp代码：

导入jquery.upload.js和jquery-1.7.2.js

添加调用js的代码：<a href="javascript:void(0)" rel="external nofollow" onclick="doUpload()">上传</a>

在底部写：

<iframe style="position:absolute;top:-9999px" src="<%=basePath%>/resources/upload/upload.htm"/></iframe>

2：js代码：

/*文件上传*/
function doUpload() {
// 上传方法
$.upload({
// 上传地址
url:window.basePath+'/reply/imageUpload',
// 文件域名字
fileName: 'uploadfile',
// 其他表单数据
params: {},
// 上传完成后, 返回json, text
dataType: 'json',
// 上传之前回调,return true表示可继续上传
onSend: function() {
return true;
},
onSubmit: function(){
},
// 上传之后回调
onComplate: function(data) {
if(data.msg){

}else{
alert("上传图片出错！");
}
}
});
}

3：后台代码：

/**
* 图片上传本地服务器
* @param request
* @param response
* @return
*/
@RequestMapping(value="imageUpload")
@ResponseBody
public Object imageUpload(HttpServletRequest request,HttpServletResponse response){
Map<String, Object> map=new HashMap<String, Object>();
UploadUtil uploadUtil = new UploadUtil();
try {
String url = uploadUtil.excelUpload(request, response);// 文件上传
} catch (IOException e) {
e.printStackTrace();
}
return map;
}

原生JavaScript实现异步多文件上传

这是在上篇的修改版本.后台代码不变就可以接着使用,但是脚本不再使用jQuery了,改为原生的JavaScript 代码,所以我们主要看JS代码. 先介绍一下技术参数: 页面技术:HTML5 后台技术:Servlet 3.0 服务器:Tomcat 7.0 脚本:JavaScript HTML5 file组件的新属性 accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了,实在是很方便. multiple:是否允许选择多个文件 HTML5 页面代码修改后 <img widt
Js+php实现异步拖拽上传文件

异步拖拽上传文件--小实例 upload.html <!DOCTYPE html>  <html> <head&g
使用AjaxFileUpload.js实现异步文件上传示例

ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: 复制代码代码如下: <input type="file" name="upload" hidden="hidden" id="file_u
Javascript异步表单提交，图片上传，兼容异步模拟ajax技术

前言: 咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟ajax技术(其实很早以前就是通过这个方式来实现多浏览器的兼容ajax,这里只是怀怀旧,作为一个技术来玩玩),下面的内容需要有一定的js基础,要不然理解起来会比较困难. 注意事项: 这是我bBank里面的一个方法,现在我把他提取出来成一个通用方法来讲解. bBank 框架介绍:http://www.cnblogs.com/bruceli/archive/20
JS异步文件上传（兼容IE8+）

在非html5的情况下是无法用ajax把文件推送到后端的,只能通过form表单提交.但是form表单提交后浏览器会根据响应头与状态码对当前页面进行渲染.下载或跳转等行为,返回text.html.json等类型的内容时浏览器会对当前页面进行渲染,相当于刷新. 所以基本思路很简单,提交上传文件表单时,让浏览器转移到iframe处理响应信息,响应信息嵌入一段js代码,这段js代码调用当前页面的一个方法就可以实现回调,类似于xss攻击. 这时就要用到form表单的target属性,我们这里只需要用到if
基于jQuery通过jQuery.form.js插件实现异步上传

本文主要从前台和后台代码分析了jquery.form.js实现异步上传的方法,分享给大家,具体代码如下前台代码: @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.7.2.min.j
asp.net+ajaxfileupload.js 实现文件异步上传代码分享

由于代码很简单,这里就闲话不多说了,直接上代码,小伙伴们自己研读代码就明白了. 前台代码: 复制代码代码如下: /*修改头像*/ //上传 function _sc() { $(".ckfile").html("").css("color", "#535353"); $("#_userImgPath").val("");
php+js实现异步图片上传实例分享

upload.php 复制代码代码如下: <?phpif(isset($_FILES["myfile"])){$ret = array();$uploadDir = 'images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;$dir = dirname(__FILE__).DIRECTORY_SEPARATOR.$uploadDir;file_exists($dir) || (mkdir($di
JQuery插件ajaxfileupload.js异步上传文件实例

在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: 复制代码代码如下: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script
JavaScript中三种异步上传文件方式

异步上传文件是为了更好的用户体验,是每个前端必须掌握的技能.这里我提出三点有关异步文件上传的方式. 使用第三方控件,如Flash,ActiveX等浏览器插件上传. 使用隐藏的iframe模拟异步上传. 使用XMLHttpRequest2来实现异步上传. 第一种使用浏览器插件上传,需要一定的底层编码功底,在这里我就不讲了,以免误人子弟,提出这点大家可以自行百度. 第二种使用隐藏的iframe模拟异步上传.为什么在这里说的是模拟呢?因为我们其实是将返回结果放在了一个隐藏的iframe中,所以才没有使

使用jquery.upload.js实现异步上传示例代码

相关推荐

随机推荐