`

ajax上传-

    博客分类:
  • ajax
阅读更多
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上传-生成缩略图-裁剪

    ajax+asp.net实现无刷新上传,在线裁剪图片,自动生成缩略图,兼容主流浏览器兼容。 前端使用jquery、jquery.bitmapcutter、ajaxupload.3.5等纯JS脚本,保证兼容性好及无需安装插件

    Ext3-Js-Ajax框架-分页标签-自动排序-文件上传

    Ext3-Js-Ajax框架-分页标签-自动排序-文件上传Ext-Js-Ajax框架-分页标签-自动排序-文件上传Ext-Js-Ajax框架-分页标签-自动排序-文件上传Ext-Js-Ajax框架-分页标签-自动排序-文件上传Ext-Js-Ajax框架-分页标签-自动...

    ssm_ajaxsubmit-ajax提交-模态对话框-ajax上传文件

    在这个项目中,“ssm_ajaxsubmit-ajax提交-模态对话框-ajax上传文件”涉及了几个关键的技术点,主要包括:Ajax异步提交、模态对话框以及文件上传。下面将详细解析这些知识点。 1. **Ajax异步提交** Ajax...

    Ajax-Codeigniter-3-Ajax-Form-Submission.zip

    Ajax-Codeigniter-3-Ajax-Form-Submission.zip,“codeigniter 3 ajax表单提交和验证教程”一集的源代码,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建...

    ajax基础-初学-01

    ajax基础-初学-01-,谁有更好资料别忘了上传啊

    超轻量级的Ajax库-ajax.js

    - 文件上传:通过FormData对象实现文件的异步上传。 **5. 扩展和优化** - 异步队列管理:当多个请求同时发出时,可以考虑添加请求队列,避免并发请求过多导致服务器压力过大。 - 超时处理:设置请求超时时间,超时...

    Ajax-Uploader批量上传控件

    Ajax-Uploader批量上传控件是一种在网页中实现文件批量上传的技术解决方案,尤其适用于处理大量图片的上传场景。这种控件通常基于JavaScript、Ajax(异步JavaScript和XML)以及可能的HTML5技术,使得用户能够在不...

    ajax-upload

    而"ajax-upload"则是一个基于jQuery的上传插件,它利用Ajax技术实现了异步、多文件上传的功能,极大地简化了文件上传的复杂性。 ### 1. jQuery与Ajax Upload的结合 jQuery是一个轻量级的JavaScript库,它简化了...

    PyPI 官网下载 | django-ajax-image-upload-0.7.1.tar.gz

    综上所述,"django-ajax-image-upload"是一个Django插件或应用,它支持使用Ajax技术实现异步图像上传。这在Web开发中非常有用,因为它可以提供更好的用户体验,用户无需等待整个页面刷新就能完成图片上传。Python...

    Ajax-vuejs-ajax.zip

    Ajax-vuejs-ajax.zip,它是一个XHR插件,适用于Vue.js 2.x及以上版本的特定功能。支持文件上传,异步和动态组件插件,HTML5pushState。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、...

    ajax 设置Access-Control-Allow-Origin实现跨域访问

    ajax跨域访问是一个老问题了,解决...如果跨域使用POST方式,可以使用创建一个隐藏的iframe来实现,与ajax上传图片原理一样,但这样会比较麻烦。因此,通过设置Access-Control-Allow-Origin来实现跨域访问比较简单。

    ASP.NET 2.0 AJAX Hands-On Lab

    通过拖放功能,用户可以直接通过鼠标操作来移动页面元素,例如上传文件、排序列表等。这一功能对于提升用户体验至关重要。 - **4.6 使用ASP.NET的Profile服务** ASP.NET的Profile服务允许开发者存储和检索用户的...

    ajax-upload-1.0.zip

    【标题】"ajax-upload-1.0.zip" 是一个用于实现AJAX文件上传功能的组件,版本号为1.0。这个组件的核心是利用Ajax技术,使得用户可以在不刷新整个页面的情况下进行文件上传,提高用户体验。 【描述】"上传组件 ajax...

    PyPI 官网下载 | django-ajax-upload-widget-0.5.1.tar.gz

    5. **django_ajax_upload_widget**: 这是实际的Python模块,包含了实现Ajax上传功能的代码。可能包括以下子目录和文件: - **models.py**: 可能定义了与上传相关的数据库模型。 - **views.py**: 包含处理Ajax请求...

    AjaxUpload - 多文件无刷新上传源代码 v1.0

    AjaxUpload是一种前端技术,用于实现多文件的无刷新上传功能,极大地提升了用户在网页上的交互体验。这个技术基于JavaScript和Ajax(异步JavaScript和XML),它允许用户在不离开当前页面的情况下,上传一个或多个...

    Asp-ajax聊天-上传图片

    纯asp代码,无插件,实现实时聊天信息互动、图片上传等功能。实战可用。

    Ajax-Uploader

    Ajax-Uploader是一个专门用于实现Ajax(异步JavaScript和XML)技术的文件上传类库,它旨在为Web应用程序提供一种无刷新、用户友好且高效的文件上传方式。Ajax技术的核心优势在于能够在不重新加载整个网页的情况下与...

    ajax-multi-image-uploader-master_Autoindex_

    Ajax 多图上传组件能够提供无刷新、流畅的图片上传体验,而自动索引技术则有助于管理这些上传的图片,使后台资源管理更为高效。本篇文章将详细介绍 `ajax-multi-image-uploader-master` 这一组件以及如何结合 PHP ...

Global site tag (gtag.js) - Google Analytics