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

html代码：

<input type="file" id="file" style="display:none;">
<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 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);
    }
})