html选择图片后预览，保存并上传

html代码：
------------------添加--------------------------

accept="image/gif,image/jpeg,image/jpg,image/png"
使用这个可以让用户只能看到并上传图片
原本是这个accept="image/*"的，后来发现在Chrome浏览器上响应过慢，所以加上mime类型，避免全部匹配引起时的浏览器响应过慢问题

<input type="file" id="file" style="display:none;" onchange="filechange(event)">//修改，这里如果不用onchange，会出现一个小bug,当你提交后，图片只能变一次
<img src="" width="200px" height="200px" id="img-change">
<button id="btn">保存图片</button>

js代码：
//实现点击图片同时，触发type=file这个input

$("#img-change").click(function () {
    $("#file").click();
})

当input发生改变时，如果有图片，则预览图片（这里只判断文件的改变，没判断图片）

/*$("#file").change(function (event) {*/
var filechange=function(event){
    var files = event.target.files, file;
    if (files && files.length > 0) {
        // 获取目前上传的文件
        file = files[0];// 文件大小校验的动作
        if(file.size > 1024 * 1024 * 2) {
            alert('图片大小不能超过 2MB!');
            return false;
        }
        // 获取 window 的 URL 工具
        var URL = window.URL || window.webkitURL;
        // 通过 file 生成目标 url
        var imgURL = URL.createObjectURL(file);
        //用attr将img的src属性改成获得的url
        $("#img-change").attr("src",imgURL);
        // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了
        // URL.revokeObjectURL(imgURL);
    }
};

接下来实现当点击按钮时，通过jquey的一个插件ajaxupload来进行上传图片,

代码如下：

$("#btn").click(function () {
        $.ajaxFileUpload({
            url: '/imgUpload',
            fileElementId:'file',
            dataType:'txt',
            secureuri : false,
            success: function (data){
                if(data=="yes"){
                    $("#img-alert").css("display","block");
                }
            },
            error:function(data,status,e){
                alert(e);
            }
        });
    });

接下来是后台代码，我的后台是spring mvc框架，我没试过不用spring mvc的框架，但最多在拦截时不同，得到后，在文件处理那块是一样的

@RequestMapping(value = "/imgUpload")
    @ResponseBody
    public synchronized String imgUpload(@RequestParam("file") MultipartFile file,HttpServletRequest request) throws IOException {
        String tishi="no";
        System.out.println("arrive here");
        if(!file.isEmpty()) {
            //System.out.println(file.getOriginalFilename());
            String message = System.currentTimeMillis() + file.getOriginalFilename();//现在的文件名是时间戳加原文件名，出现图片相同时，读取不出来的bug
            String realPath = request.getSession().getServletContext().getRealPath("/upload/");//将文件保存在当前工程下的一个upload文件
            FileUtils.copyInputStreamToFile(file.getInputStream(), new File(realPath, message));//将文件的输入流输出到一个新的文件
            message="upload/"+message;
            HttpSession session=request.getSession();
            Integer id=(Integer)session.getAttribute("userid");//在session中获得用户id
            User user=userService.get(id);//在dao层保存数据，也就是图片的地址
            user.setPhoto(message);
            userService.update(user);
            tishi="yes";//返回yes,表示存储成功，可以使用try,catch来捕捉错误，这里偷懒不用
        }
        return tishi;
    }

　　还有一点，还需再spring mvc框架下配置文件

<bean id="multipartResolver"
          class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="utf-8" />
        <property name="maxUploadSize" value="1048576000" />
        <property name="maxInMemorySize" value="40960000" />
    </bean>