图片上传


在JSP页面的body标签中

<img width="50dp" height="50dp" id="img" src=""> <!-- 显示图片的 -->
 <input name="fileImage" type="file" οnchange="uploadImage();">
 <input type="hidden" name="path" id="pic" >

在JSP有图片上传的表单中加入如下

利用ajax与json

<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>
<script type="text/javascript">
    function uploadImage() {

        //编写ajax
        var obj={
            url:"imageupload.htm",
            dataType:"json",
            type:"post",
            success:function(data){
                $("#img").show();
                $("#img").attr("src",data.imagePath);
                $("#pic").attr("value",data.imagePath);
            },
            error:function () {
                alert("失败");
            }
        };
        //提交form
        $("#imm").ajaxSubmit(obj);--------imm是body的id

    }


</script>


在控制层(controller)实现方法

/**图片上传
 * @RequestParam("fileImage")  fileImage要与页面中 name一致
 * @param fileImage
 * @return
 */
@RequestMapping("imageupload.htm")
@ResponseBody
public String imageUpload(@RequestParam("fileImage") CommonsMultipartFile fileImage) {
    // 获取上传图片的位置
    String path = servletContext.getRealPath("/upload/");
    System.err.println("上传的路径为:" + path);
    // 获取文件名称
    String name = fileImage.getOriginalFilename();
    // 创建file对象 写入
    File file = new File(path, name);
    try {
        fileImage.getFileItem().write(file);
    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    // 将上传的图片路径以json的方式返回客户端
    String imagePath = "/upload/" + name;
    JSONObject jsonObject = new JSONObject();
    jsonObject.put("imagePath", imagePath);
    // 将对象转为json格式
    String json = jsonObject.toJSONString();
    System.err.println("json:"+json);
    return json;
}

同时实现的类要实现一个接口

@Controller
public class BookInfoController implements ServletContextAware {

    @Autowired
    private BookInfoService bookInfoService;

    private ServletContext servletContext;


    @Override
    public void setServletContext(ServletContext servletContext) {
        this.servletContext = servletContext;
    }

同时要在项目下创建upload目录

在springmvc中配置添加如下

<mvc:resources location="/upload/" mapping="/upload/**" />


<!--   文件上传 -->
<bean id="multipartResolver"   class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >
    <property name="defaultEncoding" value="utf-8"/> <!-- 默认编码 (ISO-8859-1) -->
    <property name="maxInMemorySize" value="10240"/> <!-- 最大内存大小 (10240)-->
    <property name="uploadTempDir" value="/upload/"/> <!-- 上传后的目录名 (WebUtils#TEMP_DIR_CONTEXT_ATTRIBUTE) -->
    <property name="maxUploadSize" value="-1"/> <!-- 最大文件大小,-1为无限止(-1) -->
</bean>

即可实现图片的上传,,效果图如下:


点击选择文件出现目录 进行选择在点击打开按钮即可


之后出现如下效果:



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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值