你js代码把文件以base64编码形式展示了出来，是为了让用户上传文件之前能够预览对吧文件的IO操作需要用后端来实现，如果你只是做web前端开发的话，就没有必要研究这个东西，如果你是后端开发者的话可以尝试一下，相关的资料很多，我写个示例吧，后端用php为例html实现lt！DOCTYPE htmllthtmllthead。

3FileReader 对象允许应用程序异步读取存储在计算机上的文件的内容，使用 File 或 Blob 对象指定读取的文件或数据其中File对象可以是来自ltinput元素上选择文件后返回的FileList对象4readAsDataURL将读取出来的图像文件，直接显示在网页上，达到预览效果代码展示lt！DOCTYPE htmllthtmlltheadltmeta。

光靠CSS不行，可以使用JS代码，当用户选择文件后，立即读取文件类型filetype可以用html5的FileReader然后根据不同的filetype，显示不同图标。

新建文本文档 命名为DataUrlBuilerhtm，一定要修改扩展名 打开文件DataUrlBuilerhtm，没有安装Notepad++的可以使用记事本 添加以下基本内容学过HTML的都懂的 添加文件标签，文本框标签，图片标签 添加生成DataUrl的脚本，保存文件 用浏览器打开文件 单击浏览文件来选择一张图片 选择图片，单击打开后。

1创建三个html标签，input用来上传图片，textarea用来显示base64代码，因为base64代码内容很多所以使用textarea标签，p标签用来显示图片2使用js调用html5的FileReaderreadAsDataURL的API，声明三个变量用于控制图片上传，base64代码显示以及图片的显示3img_uploadaddEventListener#39change#39，readFile，fa。