`

使用ajaxFileUpload插件实现图片无刷新上传

阅读更多

1,在页面

    

<script type="text/javascript" src="js/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery/ajaxfileupload.js"></script>

<script type="text/javascript">
   function uploadimg(obj,id){
    $.ajaxFileUpload({
        url:'uploadImg.do',
        secureuri:false,                       //是否启用安全提交,默认为false
        fileElementId:'file'+id,           //文件选择框的id属性
        dataType:'text',          //服务器返回的格式,可以是json或xml等
        success:function(data,status){        //服务器响应成功时的处理函数
        	data = data.replace("<PRE>", '');  //ajaxFileUpload会对服务器响应回来的text内容加上<pre>text</pre>前后缀
            data = data.replace("</PRE>", '');
            data = data.replace("<pre>", '');
            data = data.replace("</pre>", ''); 
        	if(data.substring(0, 1) == 1){	        		
        		$("#img"+id).attr("src",data.substring(2));
        	}
        },
        error:function(data, status, e){ 
        	console.log("上传失败!");
        }
    });
  //file控件只能激发一次,要重新加载
  var nf = obj.cloneNode(true);
  nf.value='';
  obj.parentNode.replaceChild(nf, obj);
}
</script>

<input type="file" id="file1" class="file" name="myfile" onchange="uploadimg(this,1)"/>

 2,后台Controller

  

@RequestMapping(value="/uploadImg",produces="text/plain;charset=UTF-8")
		@ResponseBody
		public String uploadImg(MultipartFile myfile, HttpServletRequest request) throws IOException{
	        System.out.println("文件开始上传开始");
	        String realPath = request.getSession().getServletContext().getRealPath("/upload");
	        String originalFilename = null;
            if(myfile.isEmpty()){
            	System.out.println("上传失败!");
                return "0^上传失败,上传文件为空";
            }else{
            	if("image/jpeg".equals(myfile.getContentType())){
            		originalFilename = myfile.getOriginalFilename();
                    try {
                        FileUtils.copyInputStreamToFile(myfile.getInputStream(), new File(realPath, originalFilename));
                    } catch (IOException e) {
                    	System.out.println("上传失败!");
                        e.printStackTrace();
                    	return "0^上传失败,文件保存失败";
                    }
            	}else{
            		System.out.println("上传失败!");
	                	return "0^上传失败,文件不是指定的类型";
            	}
            }
	        //因为在Windows下<img src="file:///D:/aa.jpg">能被firefox显示,而<img src="D:/aa.jpg">firefox是不认的
	       System.out.println("上传成功!");
	       System.out.println(originalFilename);
	       return "1^"+request.getContextPath() + "/upload/" + originalFilename;
		}

 附件中有我用的ajaxfileupload.js

本来我是想要json来着,但弄了好长时间没成功,就选text吧!!!

分享到:
评论

相关推荐

    ajaxfileupload.js 无刷新上传文件插件

    这是一个无刷新上传插件,网上有很多相关的博客资料,不知道怎么设置的自己搜索相关资料,不需要分数。

    ajaxFileUpload 无刷新无Form上传

    使用ajaxFileUpload,开发者只需配置一些参数,如URL、数据、回调函数等,就可以实现无刷新的文件上传。 4. **服务器端处理**:在接收到Ajax上传的文件后,服务器端需要解析接收到的数据并保存文件。这可能涉及到...

    使用struts 2 和ajaxFileUpload组件实现图片上传预览(完整版)

    它利用了AJAX技术,通过XMLHttpRequest对象实现后台文件传输,从而实现无刷新页面的文件上传。 三、实现步骤 1. **环境准备**:确保你已经安装了MyEclipse和Tomcat服务器,并且在项目中集成了Struts 2框架。 2. **...

    使用ajaxFileUpload实现图片上传

    总的来说,`ajaxFileUpload`插件为实现无刷新的图片上传提供了便利。它简化了前端与后端的交互,使得用户可以在不离开当前页面的情况下完成文件上传,提升了Web应用的用户体验。在实际项目中,还需要考虑文件类型...

    MVC+ajaxfileupload实现多图片同时上传

    在本文中,我们将深入探讨如何使用MVC框架和AjaxFileUpload技术实现多图片同时上传的功能。这个功能在许多Web应用程序中都非常实用,如社交媒体、电子商务网站和个人博客等,它允许用户方便快捷地上传多张图片。 ...

    struts2下利用jquery、ajaxfileupload实现无刷新上传文件

    首先,要实现无刷新上传,我们需要在客户端使用jQuery和AJAXFileUpload插件。AJAXFileUpload插件允许我们选择文件并通过AJAX技术将其发送到服务器。这涉及到几个关键步骤: 1. 引入必要的库:在HTML页面中,我们...

    利用ajaxfileupload插件实现文件上传无刷新的具体方法

    做项目的时候遇到了这样一个问题,如果用普通的ASP.NET FileUpload控件实现文件上传,那么页面会刷新,那么页面上用JS拼出的元素就会消失,为了上传文件,又不能刷新页面,ajaxfileupload插件是一个很好的选择(插件下载...

    ajaxFileUpload插件

    **AjaxFileUpload插件**是一种基于JavaScript和Ajax技术的文件上传解决方案,主要用于在不刷新页面的情况下实现异步文件上传。这个插件使得用户能够在后台处理文件上传,提供更好的用户体验,因为它们可以在后台运行...

    PHP ajaxfileupload上传,jcrop图片裁剪

    利用jQuery和AJAXFileUpload插件,可以实现文件选择后无刷新上传。例如,你可以创建一个`&lt;input type="file"&gt;`元素,绑定AJAXFileUpload事件监听器,当用户选择文件后,触发AJAX请求,将文件数据发送到服务器。 2. ...

    ajaxFileUpload上传图片预览总结

    AjaxFileUpload是一个JavaScript组件,它允许我们实现异步文件上传并提供预览功能,无需刷新页面。这篇文章将深入探讨如何使用AjaxFileUpload进行图片上传和预览。 首先,让我们了解什么是AjaxFileUpload。它是一个...

    ajaxfileupload实现异步式上传文件

    AjaxFileUpload是基于jQuery的一个插件,它利用了AJAX技术来实现文件的后台异步上传。AJAX(Asynchronous JavaScript and XML)的核心在于通过JavaScript与XMLHttpRequest对象进行通信,使得前端与后台的数据交换...

    AjaxFileUpload

    AjaxFileUpload是一个基于JavaScript和PHP的插件,它允许用户通过Ajax技术实现文件的无刷新上传。这个技术在现代Web应用中非常常见,因为它提供了更好的用户体验,用户可以在不离开当前页面的情况下上传文件,大大...

    C# jquery ajax 预览并无刷新上传图片

    在本例中,这个插件被用来实现图片的无刷新上传。 6. **C#**:在服务器端,C#(可能是ASP.NET框架)处理接收到的AJAX请求。C#代码会接收上传的文件,可能进行一些验证,比如文件类型、大小等,然后将图片保存到...

    WEB文件上传之JQuery ajaxfileupload插件使用(二)

    本文将详细介绍如何使用JQuery的ajaxfileupload插件实现异步文件上传,这在提升用户体验和处理大文件时尤其有用。ajaxfileupload是jQuery的一个扩展,它允许我们在不刷新页面的情况下完成文件的上传操作,使得交互...

    使用jquery的上传插件:ajaxfileupload.js实现excel文件上传

    在本文中,我们将深入探讨如何使用jQuery的上传插件`ajaxfileupload.js`来实现Excel文件的上传功能。首先,我们需要了解这个插件的工作原理以及它如何与jQuery库结合使用。 `ajaxfileupload.js`是一个基于jQuery的...

    jquery 插件ajaxfileupload与struts2结合 实现异步上传图片

    首先,我们要了解AjaxFileUpload是jQuery的一个插件,它通过Ajax技术实现了文件的无刷新上传。AjaxFileUpload的核心在于利用HTML5的FormData对象和XMLHttpRequest Level 2的特性,使得浏览器可以发送二进制数据到...

    ajaxfileupload.js 异步上传jquery插件

    **AjaxFileUpload.js** 是一个基于 jQuery 的异步文件上传插件,它允许用户在不刷新页面的情况下上传文件,提供了一种便捷、高效的文件交互体验。这个插件广泛应用于网页应用,尤其是那些需要用户交互频繁上传文件的...

Global site tag (gtag.js) - Google Analytics