图片上传

原创 2018年04月17日 10:26:36

在JSP页面的body标签中

<img width="50dp" height="50dp" id="img" src=""> <!-- 显示图片的 -->
 <input name="fileImage" type="file" onchange="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>

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


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


之后出现如下效果:



收藏助手
不良信息举报
您举报文章:图片上传
举报原因:
原因补充:

(最多只允许输入30个字)