首页 > 图片上传,用js压缩处理后怎么替换原input图片?

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

有一个图片输入表单:

    <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中上传的图片,所以上传的还是原未压缩的图片,怎么替换一下?


同上,如果不考虑低版本浏览器,强烈推荐用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读取步骤执行完毕')
        }
    }
}

你好,请问你的问题解决了么,我也遇到了相同的问题,可否告知


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

【热门文章】
【热门文章】