图片上传，用js压缩处理后怎么替换原input图片？

Question

有一个图片输入表单：

    <form action="upload.php" method="post">
        上传图片:
        <input type="file" id="image" name="photo"  accept="image/*"/>
        <input type="submit" value="上传"/>
    </form>
    
   <script>
    var formData = null;
    $('#image').on('change', function () {
        lrz(this.files[0], {
            width: 800
        }).then(function (rst) {
                // 先临时存起来
            formData = rst.formData;
        });
    });

   </script>

用js压缩的(用的一个插件，示例代码没引入，不必管），这里主要是js代码最后，把压缩后的数据保存在formData变量中，但是这个变量没有替换input中上传的图片，所以上传的还是原未压缩的图片，怎么替换一下？

Answer 1

如果不考虑低版本浏览器，可以用HTML5的FileWriter替换原未压缩的图片

Answer 2

同上，如果不考虑低版本浏览器，强烈推荐用html5的fileReader接口来处理图片上传预览

function read(){
    var fs=document.getElementById('file').files[0];
    if(fs){
        var reader=new new FileReader();
        reader.readAsDataURL(fs);
        function li(str){
            var obj=document.createElement('li');
            obj.innerHTML=str;
            document.body.appendChild(obj);
        }
        reader.onloadstart=function(){
            li('开始读取')
        }
        reader.onprogress=function(){
            li('正在读取.....')
        }
        reader.onload=function(e){
            var img=document.createElement('img');
            img.src=this.result;
            document.body.appendChild(img);
        }
        reader.onabort=function(){
            li('读取中断！！')     
        }
        reader.onerror=function(){
            li('读取出现错误！！')
        }
        reader.onloadend=function(){
            li('FileReader读取步骤执行完毕')
        }
    }
}