你的位置:首页 > Java教程

[Java教程]ajaxFileupload使用

ajaxFileuplaod 是一个异步上传图片的插件

 

1.引入插件:

<script src="${ctxStatic}/js/ajaxfileupload.js" type="text/javascript"></script>

<script src="${ctxStatic}/js/jquery.min.js" type="text/javascript" ></script>
<script src="${ctxStatic}/js/bootstrap.min.js" type="text/javascript"></script>

2.jsp页面

<form action="" id="data-form" encType="multipart/form-data"/>

  <label >图片地址:</label>
                        <div >
                            <input id="adPicLink" name="adPicLink"
                                required type="text" />
                        </div>
                        <label >活动地址:</label>
                        <div >
                            <input id="adLink" name="adLink"
                                required type="text" />
                        </div>                        <label >活动状态:</label>
                        <div >
                            <input id="adStatus" name="adStatus" required
                                type="text" />
                        </div>
                        <label id ="uploadLabel">图片上传:</label>
                        <div >
                            <input id = "upload" name="upload" type="file" multiple="" />
                        </div>

</form>

*encType="multipart/form-data":当数据和图片一起上传时,一定要加

3.js方法

url = "${ctx}/${moduleName}/update.json?";

var params = "adName="+$("#adName").val()+"&adPicLink="+$("#adPicLink").val()//我试过用data:{“name”:“name”}传参数,后台取到的是null,我觉得只能用这样的传参方式,也许还有更好的
 url = url +params;
             $.ajaxFileUpload
                (
                    {
                        url: url,  //上传处理程序地址
                        type: 'post',// 请求方式
                        fileElementId: 'upload',//上传图片标签的Id

         data:data(我觉得没用,建议不用加)
                        dataType: 'json',//服务器返回的数据类型。可以为                        success: function (result)//服务器响应成功处理函数
                        error: function (data)//服务器响应失败处理函数
                    }
                )

4.配置文件中配置

 <!-- SpringMVC上传文件时,需配置MultipartResolver处理器 -->
    <bean id="multipartResolver" >
        <!-- 指定所上传文件的总大小不能超过800KB......注意maxUploadSize属性的限制不是针对单个文件,而是所有文件的容量之和 -->
        <property name="maxUploadSize" value="800000"/>
    </bean>

5.后台Controller获取

@RequestMapping(value = "add", method = RequestMethod.POST)
    public ModelAndView add(@FormModel TAdvertisement entity,HttpServletRequest request, @RequestParam(value = "upload") MultipartFile file) throws Exception {
        ModelAndView mav = new ModelAndView("/demo2/show");
        String fileName = file.getOriginalFilename();
        String path =Thread.currentThread().getContextClassLoader().getResource("").toString();//获取项目路径
        path=path.replace('/', '\\'); // 将/换成\
        path=path.replace("WEB-INF\\classes\\", ""); //去掉class\
        path=path.replace("file:", ""); //去掉file:
        path=path.substring(1);
        path=path+"images";
        logger.debug("path================>" + path);
        logger.debug("fileName==============>" + fileName);
        File targetFile = new File(path, fileName);
        file.transferTo(targetFile);
        logger.debug(path);
        advertisementService.addItem(entity);
        mav.addObject("result", "SUCCESS");
        return mav;
    }