图片上传-预览

<html><head>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">    <title>javascript实现图片上传本地预览图片的代码-php自学网</title>    <script type="text/javascript">        function checkFiles(str, exStr) {            if (typeof (exStr) == ‘undefined‘)                exStr = ".jpg|.png|.gif|.jpeg";            var strRegex = "(" + exStr + ")$"; //用于验证图片扩展名的正则表达式            var re = new RegExp(strRegex);            if (re.test(str.toLowerCase())) {                return true;            }            else {                alert("文件名不合法,文件的扩展名必须为" + exStr + "格式");                return false;            }        }

        //兼容IE6,IE7,IE8和Firefox的图片上传预览效果 By Zmor        function PreviewPic(id, obj) {            debugger;           var picPath = getFullPath(obj);            if (checkFiles(obj.value))                document.getElementById("Image1").src = picPath;        }

        function getFullPath(obj) {            if (obj) {                //IE                if (window.navigator.userAgent.indexOf("MSIE") >= 1) {                    obj.select();                    obj.blur();                    // IE下取得图片的本地路径                    return document.selection.createRange().text;                }                //firefox                else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {                    if (obj.files) {                        // Firefox下取得的是图片的数据                        return obj.files.item(0).getAsDataURL();                    }                    return obj.value;                }                return obj.value;            }        }

    </script></head><body>    <div>        <input name="imgfile" type="file" id="imgfile" size="40" onchange="javascript:PreviewPic(‘Image1‘,this);" />    </div>    <div>        <img  src="" id="Image1" />    </div></body></html>

时间： 2024-10-15 18:50:51

图片上传-预览的相关文章

JS实现图片上传预览效果：方法一

JavaScript 图片上传预览效果

图片上传预览是一种在图片上传之前对图片进行本地预览的技术.使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验.但随着浏览器安全性的提高,要实现图片上传预览也越来越困难.不过群众的智慧是无限的,网上已经有很多变通或先进的方法来实现.例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法.但在opera.safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览.在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享.上次写的简便无刷新文

js:s上次预览，上传图片预览，图片上传预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

html,图片上传预览，input file获取文件等相关操作

input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 var path=obj.value;//获取文件当前路径 var size=obj.files[0].size;//获取文件大小 var prefix=path.substring( path.lastIndexOf('\\')+1 );//获取文件名的前缀名(文件格式) var suffix=path.

js前端实现多图图片上传预览

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> //下面用于

Javascript之图片上传预览

使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaImageLoader来生成本地图片预览图的. <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <

多图片上传预览功能

//下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document.getElementById("doc"); var dd = document.getElementById("dd"); dd.innerHTML = ""; var fileList = docObj.files; for (var i = 0; i < fileList.length;

移动端图片上传预览

前天要做wap版的图片上传预览,找了好半天才找到比较适合的插件,我在该插件的基础上修改了一些东西,比如:上传后的图片删除后不能再添加.不能限制上传图片的数量. input虽然有multiple(多选),但是android目前是不支持的. 该插件控制不了不能上传同一张图片,暂时没有思路解决这个问题(:′д｀)ゞ 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 4 <head> 5 <meta charset=&

移动端 js 实现图片上传预览

方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> /