上传预览图片

//上传预览
function showFile(data){
    var thisfile = $(data).children(‘input‘)[0];
    contentLoaded(thisfile)
}
function ProcessFile(items) {
    var file = $(items).prop (‘files‘)[0];
    var img = $(items).parent().parent().prev()[0];
    if ( file) {
        var reader = new FileReader();
        reader.onload = function ( event ) {
            var txt = event.target.result;

            img.src = txt;
        };
    }
    reader.readAsDataURL( file );
}
function contentLoaded(_this) {
    _this.addEventListener( ‘change‘ ,
        function(){
            ProcessFile(_this);
        }, false );
}
时间: 2024-08-23 00:32:22

上传预览图片的相关文章

官方demo修改后的webuploader上传预览图片(兼容IE8) github下载回来的有问题

注意!!!!! 不要使用GitHub上下载回来的webuploader.js,下载回来的webuploader.js会报错  fn 未定义 方便的话去看百度官网的demo 浏览器将其抓包获取webuploader.js文件 <!DOCTYPE html> <html lang="zh-CN"> <head>     <meta charset="UTF-8">     <title>WebUploader演

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

<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) { //判断浏览器是否有FileReader接口 if(typeof FileReader =='undefined') { /*$("#images_show").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口

JavaScript 图片上传预览效果

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

图片上传预览

例1: 1.先创建一个file表单域,我们需要用它来浏览本地文件. <form name="form1" id="form1" method="post" action="upload.php"> <input type="file" name="file1" id="file1" /> </form> 2.试下效果: 判断文件类型

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" /> <

图片本地上传预览

在IE里面显示的话,你可以用div直接显示图片,不通过img来添加SRC,这样就不会有小图标出现 例子: <div class="banner_up_pic" id="imgPreDiv"></div> var file_upl = document.getElementById("file"); file_upl.select(); 获取图片路径  var imgpath=document.selection.creat