ajax无刷新上传(使用ajaxfileupload.js)

<body>
    <input type="file" id="files" name="files"  οnchange="javascript: ajaxFileUpload()" class="transparent_class"/>
    <input type="button" value="上传" />
    <p><img id="img1" alt="上传成功啦" src="" width="135px" height="101px"/></p>
</body>
<script type="text/javascript">
        $(function () {
            $(":button").click(function () {
                ajaxFileUpload();
            })
        })
        
        function ajaxFileUpload() {
            $.ajaxFileUpload
            (
                {
                    url: '${ctx}/ajaxUploadFile.html', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议,一般设置为false
                    fileElementId: 'files', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        /*alert(data); //可以查看返回的值*
                        $("#img1").attr("src","${ctx }/upload/" + data);
                    	
                        if (typeof (data.error) != 'undefined') {
                            if (data.error != '') {
                                alert(data.error);
                            } else {
                                alert(data.msg);
                            }
                        }
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                    	$("#img1").attr("src", "${ctx }/images/pictureFile.jpg");
                        alert(e);
                    }
                }
            )
            return false;
        }
    </script>


mvc后台:
controller:

package com.langtai.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import com.alibaba.fastjson.JSON;
import com.langtai.service.UploadService;
@Controller
public class UploadController {
	@Autowired
	UploadService UploadService;
	
	@RequestMapping(value="ajaxUploadFile.html" , method=RequestMethod.POST)
	public void AjaxUpload(@RequestParam MultipartFile[] files, HttpServletResponse response, HttpServletRequest request) throws IOException{
		System.out.println("收到" + files.length  + "个上传的请求");
		//WEB-INF/upload在服务器中默认的地址
		String realPath = request.getSession().getServletContext().getRealPath("/upload");
		List<String> fileNames = UploadService.upload(files, realPath);
		String jsonFileNames = JSON.toJSONString(fileNames);
		System.out.println(jsonFileNames);
		PrintWriter out = response.getWriter();
		out.print(jsonFileNames);
		out.flush();
		out.close();
	}
}

service:

package com.langtai.service;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import org.apache.commons.io.FileUtils;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
@Service
public class UploadService {
	public List<String> upload(MultipartFile[] files,String realPath) {
		//上传的文件的原名
		String originalFilename = null;
		List<String> fileNames = new ArrayList<String>();
		int i = 0;
		
		for (MultipartFile multipartFile : files) {
			if(multipartFile.getSize()==0)
				continue;
			originalFilename = multipartFile.getOriginalFilename();
			System.out.println("文件的原名:"  + originalFilename);
			System.out.println("文件的名称:"  + multipartFile.getName());
			System.out.println("文件的长度:"  + multipartFile.getSize());
			System.out.println("文件的类型:"  + multipartFile.getContentType());
			System.out.println("==============================================");
			try {
				String[] Filetype = originalFilename.split("\\.");
				String newFileName = new Date().getTime()  + (i++) + "." + Filetype[Filetype.length-1];
				fileNames.add(newFileName);
				FileUtils.copyInputStreamToFile(multipartFile.getInputStream(), new File(realPath, newFileName));
			} catch (IOException e) {
				System.out.println("文件" + originalFilename + "上传失败,堆栈轨迹如下:");
				e.printStackTrace();
			}
		}
		return fileNames;
	}
}

------------------------------------------------------------------------------------------------------------------------------------------
该插件对于json的处理有误,解析json会出错,所以:

修改源码,将

if ( type == "json" )
            eval_r( "data = " + data );

改成:

        if ( type == "json" ){
            data = jQuery.parseJSON(jQuery(data).text());
        }
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
在1.4以上jq中没有了handleError这个函数,所以可以把这个函数添加进这个插件中最上面去:


handleError: function (s, xhr, status, e) {

        if (s.error) {

            s.error.call(s.context || s, xhr, status, e);

        }

        if (s.global) {

            (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);

        }

    },

    httpData: function (xhr, type, s) {

        var ct = xhr.getResponseHeader("content-type"),

xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0,

data = xml ? xhr.responseXML : xhr.responseText;

        if (xml && data.documentElement.tagName == "parsererror")

            throw "parsererror";

        if (s && s.dataFilter)

            data = s.dataFilter(data, type);

        if (typeof data === "string") {

            if (type == "script")

                jQuery.globalEval(data);

            if (type == "json")

                data = window["eval"]("(" + data + ")");

        }

        return data;

    },

------------------------------------------------------------------------------------------------------------------------------------------
在使用这个插件的时候,<input>中一定要有name属性和id属性,且name属性要和controller中参数名一样。




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值