js上传图片预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $(".file").change(function(){
            var fileImg = $(".fileImg");
            var explorer = navigator.userAgent;
            var imgSrc = $(this)[0].value;
            if (explorer.indexOf('MSIE') >= 0) {
                if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {
                    imgSrc = "";
                    fileImg.attr("src","/img/default.png");
                    return false;
                }else{
                    fileImg.attr("src",imgSrc);
                }
            }else{
                if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {
                    imgSrc = "";
                    fileImg.attr("src","/img/default.png");
                    return false;
                }else{
                    var file = $(this)[0].files[0];
                    var url = URL.createObjectURL(file);
                    fileImg.attr("src",url);
                }
            }
        })
    })
    </script>
</head>
<body>
    <form enctype="multipart/form-date" method="post">
        <input type="file" class="file">
        <input type="submit" class="sub">
    </form>
    <img src="" class="fileImg">
</body>
</html>

欢迎加入交流群:398918539

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-22 09:51:45

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

js上传图片&amp;预览(filereader)

fileReader HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } else { ale

js 上传图片预览

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="localImag"> <img id="preview" style="display:block; border:1px solid red; wi

用HTML5的File API做上传图片预览功能

用HTML5的File API做上传图片预览功能 前几天做了一个项目,涉及到上传本地图片的功能,正好之前了解过 html5 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(PS : 不得不承认我这个人有多懒,没有需求的时候我向来不主动去学习).移动端完全支持哦!已测试. 下面给大家看看代码吧怎么实现的 第一:HTLM部分(这里不去做漂亮的样式了我们注重学习功能) <input type="file" id="fileElem" mul

HTML5拖拽上传图片预览

参考博文1:http://blog.csdn.net/testcs_dn/article/details/8695532 参考博文2:http://justcoding.iteye.com/blog/2105760 1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块

jquery实现上传图片预览(需要浏览器支持html5)

jquery实现上传图片预览(需要浏览器支持html5) <!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> <m

HTML5时代的纯前端上传图片预览及严格图片格式验证函数(转载)

原文地址:http://www.2cto.com/kf/201401/274752.html 一.要解决什么样的问题? 在写这个函数之前,有们童鞋在群里问如何纯前端严格验证图片格式.这在html5时代之前,那是不可能实现的,必须要上传到后台,由后台脚本读取文本流后进一步验证.这样就造成了一定的服务器资源浪费.但是html5时代,这个工作我们完全可以交给前端来做了. 另一方面,html5时代,许多我们原来的图片预览方案都失效了.究其原因,其实是现代浏览器出于对用户隐私的保护,file控件不再提供真

HTML5上传图片预览

笔记一下!!! <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.m

利用html5实现上传图片预览

在HTML5中,通过FileReader可以轻松的实现这个功能. 只要在<input type="file" />文件表单元素中监听 onchange 事件,然后通过FileReader读取图片文件,然后将读取的内容在<img>中显示即可. 实现代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /

JavaScript实现简单的前端上传图片预览

JavaScript实现简单的前端上传图片预览 <div class="file_upload"> <div id="portrait"></div> <input type="file" name="" id="" onchange="showPerview(this)"> </div> <script type=&qu