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

时间：2023-03-09 21:50:11
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>

　　

相关文章