竞博体育 > 编程 > 竞博体育app下载上传成功后.会有一个回调函数.比如缩略图地址显示出来,请大家多多支持

竞博体育app下载上传成功后.会有一个回调函数.比如缩略图地址显示出来,请大家多多支持

jquery本地上传预览扩展(隐藏上传控件单击图片上传支持ie!竞博体育app下载 ,!),jquery图片上传

我用到的原材料地址:

修改后:

/// <reference path="../../Js/jquery-1.7.2.min.js" />
/*
*使用方法:  !!!!!!!!请把input放在图片上方
<div>
<input type="file" id="up" />
<img id="ImgPr" width="120" height="120" /></div>
把需要进行预览的IMG标签外 套一个div 然后给上传控件id给予uploadPreview 然后调用CheckInito 然后点击图片就行了
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }}).CheckInito();

var p=$("fff").uploadPreview({});
p.checkFile() //立即弹出file选择文件对话框 ie不适合

*/
$.fn.extend({
    uploadPreview: function (opts) {
        var _self = this,
            _this = $(this);
        opts = jQuery.extend({
            Img: "ImgPr",
            Width: 100,
            Height: 100,
            ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
            Callback: function () { }
        }, opts || {});
        _self.getObjectURL = function (file) {
            var url = null;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file)
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file)
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file)
            }
            return url
        };
        _this.change(function () {
            if (this.value) {
                if (!RegExp(".(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                    alert("选择文件错误,图片类型必须是" + opts.ImgType.join(",") + "中的一种");
                    this.value = "";
                    return false
                }
                var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;
                if (ie) {
                    try {
                        $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
                    } catch (e) {
                        var src = "";
                        var obj = $("#" + opts.Img);
                        var div = obj.parent("div")[0];
                        _self.select();
                        if (top != self) {
                            window.parent.document.body.focus()
                        } else {
                            _self.blur()
                        }
                        src = document.selection.createRange().text;
                        document.selection.empty();
                        obj.hide();
                        obj.parent("div").css({
                            'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
                            'width': opts.Width + 'px',
                            'height': opts.Height + 'px'
                        });
                        div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
                    }
                } else {
                    $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
                }
                opts.Callback()
            }
        })

        return {
            /*ie不适用!*/
            checkFile: function CheckFile() {
                var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;
                if (ie) {
                    _this[0].click();
                } else {
                    var mouseobj = document.createEvent("MouseEvents");
                    mouseobj.initEvent("click", true, true);
                    _this[0].dispatchEvent(mouseobj);
                }
                return _self;
            },
            //兼容ie8的
            CheckInito: function () {
                var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;
                _this.css("position", "absolute");
                _this.parent().css("width", opts.Width + "px");
                _this.parent().css("height", opts.Height + "px");
                if (ie) {
                    //width: 67.5px; height: 37.4px; padding-right: 5px; position: absolute; opacity: 1;
                    _this.css("width", opts.Width + "px");
                    _this.css("height", opts.Height + "px");
                    _this.css("font-size", "200px");
                    _this.css("overflow", "hidden");
                } else {
                    _this.css("left", "0px");
                    _this.css("top", "0px");
                    _this.css("width", opts.Width + "px");
                    _this.css("height", opts.Height + "px");
                }
                _this.css("opacity", "0");
                return _self;
            }
        };
    }
});

调用实例:

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Js/jquery-1.7.2.min.js"></script>
    <script src="Admin/js/uploadPreview.js"></script>
    <script>
        function loadOver() {
            $("#myselfpicFile").uploadPreview({ Img: "myselfpic", Width: 150, Height: 180 }).CheckInito();
        }
    </script>
</head>
<body onload="loadOver();">
    <div class="photo">
        <input id="myselfpicFile" type="file" name="myselfpic" />
        <img width="150" height="180" id="myselfpic" class="" src="../$obj.myselfpic" />
    </div>
</body>
</html>

最终效果图

ie:

竞博体育app下载 1

 

火狐:

竞博体育app下载 2

 

谷歌:

 

竞博体育app下载 3

 

请大家多多支持

我用到的原材料地址: 修改...

特点:

基于jquery实现图片上传本地预览功能,jquery图片上传

当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的,如果网速慢或图片有问题,这样不但浪费客户时间同时也浪费服务器资源了,下面我们介绍利用js上传图片时本地实现预览,希望此方法对各位有所帮助哦。
一、原理

分为两步:

当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL);

把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来。

在这里,我们需要了解Javascript里File对象、Blob对象和window.URL.createObjectURL()方法。

1、File对象

File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象.

下面来看获取FileList对象:

<script type="text/javascript" src="jquery.js"></script>

<input id="upload" type="file">
<img id="preview" src="">

<script type="text/javascript">
$('#upload').change(function(){
  // 获取FileList的第一个元素
  alert(document.getelementbyid('upload').files[0]);
});
</script>

2、Blob对象

一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件.

我们想要得到的对象URL实际上就是从Blob这个对象获取的,因为File的接口继承Blob。下面就来把Blob对象转换成URL:

<script type="text/javascript">
var f = document.getelementbyid('upload').files[0];
var src = window.URL.createObjectURL(f);
document.getElementById('preview').src = src;
</script>

一个比较完整的实例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Upload</title>
<style type="text/css">
    #destination{
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMethod=scale);
    }
</style>

<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>-->
<script type="text/javascript" src="http://localhost/jQuery/jquery.js"></script>
<script type="text/javascript">
//处理file input加载的图片文件
$(document).ready(function(e) {
 //判断浏览器是否有FileReader接口
 if(typeof FileReader =='undefined')
 {
  $("#destination").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口,无法使用图片本地预览,请更新浏览器获得最好体验');
 //如果浏览器是ie
 if($.browser.msie===true)
 {
  //ie6直接用file input的value值本地预览
  if($.browser.version==6)
  {
    $("#imgUpload").change(function(event){   
    //ie6下怎么做图片格式判断?
    var src = event.target.value;
    //var src = document.selection.createRange().text; //选中后 selection对象就产生了 这个对象只适合ie
    var img = '<img src="'+src+'" width="200px" height="200px" />';
    $("#destination").empty().append(img);
   });
  }
  //ie7,8使用滤镜本地预览
  else if($.browser.version==7 || $.browser.version==8)
  {
  $("#imgUpload").change(function(event){
    $(event.target).select();
    var src = document.selection.createRange().text;
    var dom = document.getElementById('destination');
    //使用滤镜 成功率高
    dom.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= src;
    dom.innerHTML = '';
    //使用和ie6相同的方式 设置src为绝对路径的方式 有些图片无法显示 效果没有使用滤镜好
    /*var img = '<img src="'+src+'" width="200px" height="200px" />';
    $("#destination").empty().append(img);*/
   });
  }
 }
 //如果是不支持FileReader接口的低版本firefox 可以用getAsDataURL接口
 else if($.browser.mozilla===true)
 {
  $("#imgUpload").change(function(event){
  //firefox2.0没有event.target.files这个属性 就像ie6那样使用value值 但是firefox2.0不支持绝对路径嵌入图片 放弃firefox2.0
  //firefox3.0开始具备event.target.files这个属性 并且开始支持getAsDataURL()这个接口 一直到firefox7.0结束 不过以后都可以用HTML5的FileReader接口了
  if(event.target.files)
  {
   //console.log(event.target.files);
   for(var i=0;i<event.target.files.length;i++)
   { 
     var img = '<img src="'+event.target.files.item(i).getAsDataURL()+'" width="200px" height="200px"/>';
    $("#destination").empty().append(img);
   }
  }
  else
  {
   //console.log(event.target.value);
   //$("#imgPreview").attr({'src':event.target.value});
  }
  });
 }
 }
 else
 {
 // version 1
 /*$("#imgUpload").change(function(e){
  var file = e.target.files[0];
  var fReader = new FileReader();
  //console.log(fReader);
  //console.log(file);
  fReader.onload=(function(var_file)
  {
   return function(e)
   {
   $("#imgPreview").attr({'src':e.target.result,'alt':var_file.name});
   }
  })(file);
  fReader.readAsDataURL(file);
  });*/

  //单图上传 version 2 
  /*$("#imgUpload").change(function(e){
    var file = e.target.files[0];
    var reader = new FileReader(); 
  reader.onload = function(e){
   //displayImage($('bd'),e.target.result);
   //alert('load');
   $("#imgPreview").attr({'src':e.target.result});
  }
  reader.readAsDataURL(file);
   });*/
  //多图上传 input file控件里指定multiple属性 e.target是dom类型
   $("#imgUpload").change(function(e){ 
    for(var i=0;i<e.target.files.length;i++)
    {
     var file = e.target.files.item(i);
   //允许文件MIME类型 也可以在input标签中指定accept属性
   //console.log(/^image/.*$/i.test(file.type));
   if(!(/^image/.*$/i.test(file.type)))
   {
    continue;  //不是图片 就跳出这一次循环
   }

   //实例化FileReader API
   var freader = new FileReader();
   freader.readAsDataURL(file);
   freader.onload=function(e)
   {
    var img = '<img src="'+e.target.result+'" width="200px" height="200px"/>';
    $("#destination").empty().append(img);
   }
    }
   });

  //处理图片拖拽的代码
  var destDom = document.getElementById('destination');
  destDom.addEventListener('dragover',function(event){
   event.stopPropagation();
   event.preventDefault();
   },false);

  destDom.addEventListener('drop',function(event){
   event.stopPropagation();
   event.preventDefault();
   var img_file = event.dataTransfer.files.item(0);  //获取拖拽过来的文件信息 暂时取一个
   //console.log(event.dataTransfer.files.item(0).type);
   if(!(/^image/.*$/.test(img_file.type)))
   {
   alert('您还未拖拽任何图片过来,或者您拖拽的不是图片文件');
   return false;
   }
   fReader = new FileReader();
   fReader.readAsDataURL(img_file);
   fReader.onload = function(event){
   destDom.innerHTML='';
   destDom.innerHTML = '<img src="'+event.target.result+'" width="200px" height="200px"/>'; 
   };
  },false);
 }
});
</script>
</head>

<body>
<input type="file" id="imgUpload" name="imgUpload" draggable="true" single/> <!--允许file控件接受的文件类型-->
<!--<input type="file" id="imgUpload" name="imgUpload" accept="image/*" multiple/>-->
<div id="destination" style="width:200px;height:200px;border:1px solid #000000;"><img src="nopic.jpg" /></div>
</body>
</html>

二、兼容性

  • •上述方法适用于chrome浏览器
  • •如果是IE浏览器可以直接使用input的value来代替src
  • •网上查看资料有直接使用File对象的getAsDataURL()方法获取URL的,现在这个方法都已经废除,类似的还有getAsText()和getAsBinary()方法;

以上就是本文的全部内容,希望对大家的学习有所帮助。

1.不依赖与jquery

您可能感兴趣的文章:

  • jquery 批量上传图片实现代码
  • 基于jquery实现的上传图片及图片大小验证、图片预览效果代码
  • jquery 图片上传按比例预览插件集合
  • jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
  • jquery实现兼容浏览器的图片上传本地预览功能
  • jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
  • 使用jQuery实现验证上传图片的格式与大小
  • PHP+jQuery+Ajax实现多图片上传效果
  • jQuery实现本地预览上传图片功能

当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合...

2.而且,好看些吧..支持很多实例,上传成功后.会有一个回调函数.比如缩略图地址显示出来

 用法:

 

复制代码 代码如下:

 <link href="" rel="stylesheet" />
<script src=";  

 

复制代码 代码如下:

 var thumbnailuploader = new qq.FineUploader({
            element: $('#thumbnail-fine-uploader')[0],
            request: {
                endpoint: 'Uploadimg'
            },
            validation: {
                allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
            },
            callbacks: {
                onComplete: function (id, fileName, responseJSON) {
                    if (responseJSON.success) {
                        //alert(responseJSON.guidimg);
                        $('#logo').val(responseJSON.guidimg);
                        $('#thumbnail-fine-uploader').append('<img id="logoimg" style="width:200;hight:300px;"  src="' + responseJSON.imgurl + '" alt="' + responseJSON.guidimg + '">');
                    }
                }
            }
        });  

您可能感兴趣的文章:

  • 利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
  • jQuery插件uploadify实现ajax效果的图片上传
  • jQuery实现图片上传和裁剪插件Croppie
  • jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
  • Jquery uploadify图片上传插件无法上传的解决方法
  • 图片上传插件jquery.uploadify详解
  • jquery 图片上传按比例预览插件集合
  • jQuery自定义图片上传插件实例代码
上一篇:没有了
下一篇:没有了
  • 首页
  • 电话
  • 软件