主页 > 知识库 > 网页基础 > Javascript/Ajax >
栏目列表

jquery 实现上传图片的预览

来源:网络 作者:BruceAndLee 发表于:2012-08-03 08:57  点击:
今天给大家展示一个input file上传图片的预览,先看看代码 双击代码全选 1 ol class= dp-c lip function getFullPath(obj) { // 得到图片的完整路径 /p/lilip if (obj) { /p/lilip //ie /p/lilip if (window.navigator.userAgent.indexOf(MSIE) = 1) { /p/lil
今天给大家展示一个input file上传图片的预览,先看看代码
双击代码全选
1
<ol class="dp-c"><li><p>function getFullPath(obj) {    // 得到图片的完整路径  </p></li><li><p>    if (obj) {  </p></li><li><p>        //ie  </p></li><li><p>        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {  </p></li><li><p>            obj.select();  </p></li><li><p>            return document.selection.createRange().text;  </p></li><li><p>        }  </p></li><li><p>        //firefox  </p></li><li><p>        else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {  </p></li><li><p>            if (obj.files) {  </p></li><li><p>                return obj.files.item(0).getAsDataURL();  </p></li><li><p>            }  </p></li><li><p>            return obj.value;  </p></li><li><p>        }  </p></li><li><p>        return obj.value;  </p></li><li><p>    }  </p></li><li><p>} </p></li></ol>
 
这段代码是获取客户端图片的完整路径
我们再限制其大小和格式
双击代码全选
1
<ol class="dp-c"><li><p>$("#loadFile").change(function () {  </p></li><li><p>        var strSrc = $("#loadFile").val();  </p></li><li><p>        img = new Image();  </p></li><li><p>        img.src = getFullPath(strSrc);  </p></li><li><p>        // 验证上传文件格式是否正确  </p></li><li><p>        var pos = strSrc.lastIndexOf(".");  </p></li><li><p>        var lastname = strSrc.substring(pos, strSrc.length)  </p></li><li><p>        if (lastname.toLowerCase() != ".jpg") {  </p></li><li><p>            alert("您上传的文件类型为" + lastname + ",图片必须为 JPG 类型");  </p></li><li><p>            return false;  </p></li><li><p>        }  </p></li><li><p>        //验证上传文件宽高比例  </p></li><li><p> </p></li><li><p>        if (img.height / img.width > 1.5 || img.height / img.width < 1.25) {  </p></li><li><p>            alert("您上传的图片比例超出范围,宽高比应介于1.25-1.5");  </p></li><li><p>            return;  </p></li><li><p>        }  </p></li><li><p>        //验证上传文件是否超出了大小  </p></li><li><p>        if (img.fileSize / 1024 > 150) {  </p></li><li><p>            alert("您上传的文件大小超出了150K限制!");  </p></li><li><p>            return false;  </p></li><li><p>        } </p></li></ol>
 
其中呢,这个loadFile是html input file的id。在它的change事件,也就是选择了要上传的文件以后,让图片显示在图片框里吗,在上面代码的最后加上以下代码
双击代码全选
1
<ol class="dp-c"><li><p>$("#stuPic").attr("src", getFullPath(this)); </p></li></ol>
 
看看效果

    有帮助
    (0)
    0%
    没帮助
    (30)
    100%