这里有新鲜出炉的精品教程,程序狗速度看过来!
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五重大修改。
这篇文章主要介绍了 JS+HTML5 实现上传图片预览效果, 结合完整实例形式分析了 javascript 上传图片本地预览的具体操作步骤与相关实现技巧, 需要的朋友可以参考下
本文实例讲述了 JS+HTML5 实现上传图片预览效果。分享给大家供大家参考,具体如下:
在项目中遇到用 input 标签 file 类型的文件上传,想实在上传之前进行图片的预览功能;之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但是头像却已经改变,如果在需要改变就导致了多余图片的保存服务器。
在网上找了下解决方案,如下所示:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <title>html5 图片上传预览</title>
- <style>
- #preview {
- width: 300px;
- height: 300px;
- overflow: hidden;
- }
- #preview img {
- width: 100%;
- height: 100%;
- }
- </style>
- <script src="jquery-1.7.2.min.js"></script>
- <script type="text/javascript">
- function preview1(file) {
- var img = new Image(), url = img.src = URL.createObjectURL(file)
- var $img = $(img)
- img.onload = function() {
- URL.revokeObjectURL(url)
- $('#preview').empty().append($img)
- }
- }
- function preview2(file) {
- var reader = new FileReader()
- reader.onload = function(e) {
- var $img = $('<img>').attr("src", e.target.result)
- $('#preview').empty().append($img)
- }
- reader.readAsDataURL(file)
- }
- $(function() {
- $('[type=file]').change(function(e) {
- var file = e.target.files[0]
- preview1(file)
- })
- })
- </script>
- </head>
- <body>
- <form enctype="multipart/form-data" action="" method="post">
- <input type="file" name="imageUpload"/>
- <div id="preview" style="width: 300px;height:300px;border:1px solid gray;"></div>
- </form>
- </body>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0518/333928.html