js上传图片预览图

百度得到得方法，记录下来。

这个这是选择图片后增加预览而已。

先上效果图：

先说说上传按钮优化的原理，点击上传签购单是一个图片，作为图片预览区域，那个上传控件以绝对定位的形式覆盖在了这个图片上面，然后设置opacity=0，使上传控件不可见，这样点击图片就会打开上传对话框。
上传控件有onchange事件，用这个来让图片预览区域显示你选择的图片。直接上代码吧，说不清：

HTML部分：
<img id = "preview" class="upicon" src="icon.jpg" width="100px"/>
<input class="file" type="file" name="pic" accept="image/*"/>


JS部分：
function changepic(o) {
        var reads = new FileReader();
        f = o.files[0];
        reads.readAsDataURL(f);
        reads.onload = function (e) {
                document.getElementById('preview').src = this.result;
        };
}


服务器端还是以通常方式来处理。

有关PHP系统、Discuz或网站等各种问题，可以联系QQ1069971363寻求付费支持