图片上传

最新推荐文章于 2024-03-17 20:35:51 发布

小小米粒吖

最新推荐文章于 2024-03-17 20:35:51 发布

阅读量259

点赞数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <input type="file" id="file" style="display:none;" onchange="filechange(event)">
  <!-- 修改，这里如果不用onchange，会出现一个小bug,当你提交后，图片只能变一次 -->
<img src="img/iconfont-tianjia.png" width="200px" height="200px" id="img-change">

</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
  $("#img-change").click(function () {
    $("#file").click();
});


/*$("#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.createObjectURL(obj.files[0]);获得一个http格式的url路径，这个时候就可以设置到<img>中显示了。

        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);
    }
};


</script>