jquery.fileupload上传图片

本文介绍如何使用 jQuery 插件实现文件上传功能,包括 js 文件的导入、HTML 结构定义、事件绑定及后端 Controller 编写等步骤,并提供了解决 IE 下弹出下载框的问题方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、按顺序导入以下js文件:

    jquery-1.9.1.js
    js/vendor/jquery.ui.widget.js : jQuery UI Widget
    js/jquery.iframe-transport.js : 扩展iframe数据传输
    js/jquery.fileupload.js : jQuery File Upload核心类
    js/cors/jquery.xdr-transport.js 在IE下应载入此文件解决跨域问题

2、定义一个file:

<input type="file" name="imgfile" id="fileupload"
        data-url="<%=request.getContextPath()%>/uploadFilePlug"
        multiple />
<input type="text" name="imgName" id="imgName" />

3、给file标签添加事件:

        $('#fileupload').fileupload(
                {   //dataType: 'json',//假设这里加了dataType: 'json',则表明后台返回的为json对象,而非json格式字符串,下面可以直接这样获取返回的json对象数据:var imgName=data.result.imgName;
                    done : function(e, data) {//设置文件上传完毕事件的回调函数
                        var result = data.result[0].body ? data.result[0].body.innerHTML : data.result;//解决ie8,9下获取data.result出错问题
                        alert(result);
                        var jsondata = $.parseJSON(result);//没有指明dataType: 'json',所以后台默认返回的是json字符串,这里需要转为json对象。
                        alert(jsondata.imgName);
                        $("#imgName").val(jsondata.imgName);//此处可以稍做修改,获取上传好的图片地址,显示在用户浏览器
                    }
                });

4、编写Controller:

    @RequestMapping("/uploadFilePlug")
    public @ResponseBody Map<String, Object> uploadFilePlug(@RequestParam("imgfile") MultipartFile imgfile,
            HttpServletResponse response) throws IOException {
        Map<String, Object> map = new HashMap<String, Object>();
        System.out.println(imgfile.getOriginalFilename());
        map.put("imgName", imgfile.getOriginalFilename());
        return map;
    }

5、springmvc返回json时,ie下面会弹出下载json框,解决方法,在springmvc配置文件中,修改为如下配置:

    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean
                class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="supportedMediaTypes" value="text/html;charset=UTF-8"></property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值