js代码
<script type="text/javascript" src="./js/ajaxfileupload.js" charset="UTF-8"></script>
<script language="javascript">
function ajaxFileUpload() {
$.ajaxFileUpload({
url : 'useruploadHeadImg',
secureuri : false,
fileElementId : 'upFile',
dataType : 'json',
success: function (data, status)
{
data=data.trim(); //必须加,得到的值前面有一个空隔,需要去掉
var src="uploadHeadImg/"+data;
$("#myHeadImg").attr("src",""+src);
},
error: function (data, status, e)
{
// alert('错误返回!!!!');
}
});
}
</script>
html关键代码
<div>上传
<input type="file" onchange="ajaxFileUpload()" class="upFile" name="upFile" id="upFile">
</div>
<div>图片显示
<img src="uploadHeadImg/<s:property value="#attr.loginUser.headImg"/>" width="200" id="myHeadImg"/>
</div>
action代码
public String uploadHeadImg() {
SimpleDateFormat simp= new SimpleDateFormat("yyyy_MM_dd_HH_mm_ss");
String sj=simp.format(new Date());
String name="img"+sj+".jpg";
String path=ServletActionContext.getServletContext().getRealPath("/");
System.out.println("上传的位置:"+path+"uploadHeadImg"+"\\"+name);
File file=new File(path+"uploadHeadImg\\"+name); //上传的去处
String data=null;
try {
FileUtils.copyFile(upFile,file);
data=name;
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
System.out.println("文件名:"+data);
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
PrintWriter out=null;
try {
out = response.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
out.print(data);
out.flush();
System.out.println("出了上传"+data);
return null;
}
//由于ajaxfileupload.js是半成品,存在很多兼容问题,这个ajaxfileupload.js修改后,可支持chrom,360,搜狐,但不支持ie8等系列。
分享到:
相关推荐
ajax+asp.net实现无刷新上传,在线裁剪图片,自动生成缩略图,兼容主流浏览器兼容。 前端使用jquery、jquery.bitmapcutter、ajaxupload.3.5等纯JS脚本,保证兼容性好及无需安装插件
Ext3-Js-Ajax框架-分页标签-自动排序-文件上传Ext-Js-Ajax框架-分页标签-自动排序-文件上传Ext-Js-Ajax框架-分页标签-自动排序-文件上传Ext-Js-Ajax框架-分页标签-自动排序-文件上传Ext-Js-Ajax框架-分页标签-自动...
在这个项目中,“ssm_ajaxsubmit-ajax提交-模态对话框-ajax上传文件”涉及了几个关键的技术点,主要包括:Ajax异步提交、模态对话框以及文件上传。下面将详细解析这些知识点。 1. **Ajax异步提交** Ajax...
Ajax-Codeigniter-3-Ajax-Form-Submission.zip,“codeigniter 3 ajax表单提交和验证教程”一集的源代码,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建...
ajax基础-初学-01-,谁有更好资料别忘了上传啊
- 文件上传:通过FormData对象实现文件的异步上传。 **5. 扩展和优化** - 异步队列管理:当多个请求同时发出时,可以考虑添加请求队列,避免并发请求过多导致服务器压力过大。 - 超时处理:设置请求超时时间,超时...
Ajax-Uploader批量上传控件是一种在网页中实现文件批量上传的技术解决方案,尤其适用于处理大量图片的上传场景。这种控件通常基于JavaScript、Ajax(异步JavaScript和XML)以及可能的HTML5技术,使得用户能够在不...
而"ajax-upload"则是一个基于jQuery的上传插件,它利用Ajax技术实现了异步、多文件上传的功能,极大地简化了文件上传的复杂性。 ### 1. jQuery与Ajax Upload的结合 jQuery是一个轻量级的JavaScript库,它简化了...
综上所述,"django-ajax-image-upload"是一个Django插件或应用,它支持使用Ajax技术实现异步图像上传。这在Web开发中非常有用,因为它可以提供更好的用户体验,用户无需等待整个页面刷新就能完成图片上传。Python...
Ajax-vuejs-ajax.zip,它是一个XHR插件,适用于Vue.js 2.x及以上版本的特定功能。支持文件上传,异步和动态组件插件,HTML5pushState。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、...
ajax跨域访问是一个老问题了,解决...如果跨域使用POST方式,可以使用创建一个隐藏的iframe来实现,与ajax上传图片原理一样,但这样会比较麻烦。因此,通过设置Access-Control-Allow-Origin来实现跨域访问比较简单。
通过拖放功能,用户可以直接通过鼠标操作来移动页面元素,例如上传文件、排序列表等。这一功能对于提升用户体验至关重要。 - **4.6 使用ASP.NET的Profile服务** ASP.NET的Profile服务允许开发者存储和检索用户的...
【标题】"ajax-upload-1.0.zip" 是一个用于实现AJAX文件上传功能的组件,版本号为1.0。这个组件的核心是利用Ajax技术,使得用户可以在不刷新整个页面的情况下进行文件上传,提高用户体验。 【描述】"上传组件 ajax...
5. **django_ajax_upload_widget**: 这是实际的Python模块,包含了实现Ajax上传功能的代码。可能包括以下子目录和文件: - **models.py**: 可能定义了与上传相关的数据库模型。 - **views.py**: 包含处理Ajax请求...
AjaxUpload是一种前端技术,用于实现多文件的无刷新上传功能,极大地提升了用户在网页上的交互体验。这个技术基于JavaScript和Ajax(异步JavaScript和XML),它允许用户在不离开当前页面的情况下,上传一个或多个...
纯asp代码,无插件,实现实时聊天信息互动、图片上传等功能。实战可用。
Ajax-Uploader是一个专门用于实现Ajax(异步JavaScript和XML)技术的文件上传类库,它旨在为Web应用程序提供一种无刷新、用户友好且高效的文件上传方式。Ajax技术的核心优势在于能够在不重新加载整个网页的情况下与...
Ajax 多图上传组件能够提供无刷新、流畅的图片上传体验,而自动索引技术则有助于管理这些上传的图片,使后台资源管理更为高效。本篇文章将详细介绍 `ajax-multi-image-uploader-master` 这一组件以及如何结合 PHP ...