多图上传预览

news/2024/7/10 22:36:27 标签: html, jquery, javascript, html5
htmledit_views">
<ul class="upload_box"></ul>  // 预览图片容器
<div class="weui-uploader__input-box upload_input">
    <input class="weui-uploader__input upload_file" name="avatar[]" type="file" accept="image/*" onchange="setImagePreview(this)">
</div>

预览方法

var upload_btn = '<div class="weui-uploader__input-box upload_input">'+$('.upload_input').html()+'</div>';
    //下面用于图片上传预览功能
    function setImagePreview(avalue) {
        var docObj = avalue;

        var imgObjPreview = $('.upload_box');

        if(docObj.files && docObj.files[0])
        {
          //火狐下,直接设img属性
          // imgObjPreview.style.display = 'block';
          // imgObjPreview.style.maxWidth = '100%';
          // imgObjPreview.style.maxHeight = '85px';
          //imgObjPreview.src = docObj.files[0].getAsDataURL();

          //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
          // imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
          imgObjPreview.append('<li><div class="upload_img"><img src="'+window.URL.createObjectURL(docObj.files[0])+'" width="100%" height="100%" /></div><i class="weui-icon-cancel remove_img" ></i></li>');
        }
        else
        {
          //IE下,使用滤镜
          docObj.select();
          var imgSrc = document.selection.createRange().text;
          var localImagId = docObj.nextElementSibling;
          //必须设置初始大小
          localImagId.style.width = "100%";
          // localImagId.style.height = "85px";
          //图片异常的捕捉,防止用户修改后缀来伪造图片
          try{
            localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
          }
          catch(e)
          {
            alert("您上传的图片格式不正确,请重新选择!");
            return false;
          }
          imgObjPreview.style.display = 'none';
          document.selection.empty();
        }

        $(docObj).parent().hide();

        if($('.upload_box li').length >= 3){
            return false;
        }

        $(docObj).parent().before(upload_btn);

        return true;
    }
    // 删除图片
    $("body").on("click",'.remove_img',function(){
        var index = $(this).index();
        $('.upload_input').eq((index - 1)).remove();
        $(this).parent().remove();

        i = 0;
        $('.upload_input').each(function(){
            if($(this).css('display') != 'none'){
                i++;
            }
        })
        if(i == 0){
            $('.upload_input').parent().append(upload_btn);
        }
    });

 


http://www.niftyadmin.cn/n/1365615.html

相关文章

PHPExcel类导入excel表带图片

使用PHPExcel类导入excel表格数据&#xff0c;表中带图片导入 public function importPost(){// 上传成功后的excel文件路径$file $this->request->param(video_url);if (!$file) {$this->error(上传文件不能为空);}// 文件的本地路径$inputFileName ROOT_PATH .up…

javascript的URL编码和解码

在使用url进行参数传递时&#xff0c;经常会传递一些中文名的参数或URL地址&#xff0c;在后台处理时会发生转换错误。在有些传递页面使用GB2312&#xff0c;而在接收页面使用UTF8&#xff0c;这样接收到的参数就可能会与原来发生不一致。使用服务器端的urlEncode函数编码的URL…

PHPExcel类导出excel表带图片

使用PHPExcel类导出excel表格数据&#xff0c;表中带图片导出 /**** 导出Excel*/public function export(){//导出Excel$data Db::name(test)->select(); // 查询出来的数据import(PHPExcel.PHPExcel, EXTEND_PATH);$objPHPExcel new \PHPExcel();$objWriter new \PHPEx…

熟悉XRumer常用内置语法

不说废话&#xff0c;直接进入主题&#xff0c;在使XRumer这个强大的神器之前我们有必要了解一下它的常用语法 论坛大多使用BBcode&#xff0c;想必大家都很熟悉了&#xff0c;用XRumer做论坛推广时&#xff0c;同样需要使用BBCode XRumer支持Spin语法 这样如果我想给我的网站做…

Spring FrameWork从入门到NB - Environment Abstraction

Environment Abstraction&#xff0c;环境抽象&#xff0c;指的是Spring通过Environment接口方便地从环境变量或配置文件中读取数据。 Spring容器的Environment接口包含两个重要概念或模块&#xff1a;profiles和properties。 profiles&#xff1a;有active或inactive两个状态…

PHP 数字前面补零 固定位数补0

可以使用php内置函数sprintf() 函数把字符串填充为新的长度 $str 2; $newStr sprintf(%05s, $str); echo $str; 输出结果为 000002&#xff1b;

【转】ASP.NET Button、ImageButton、LinkButton、HyperLink区别

ASP.NET Button、ImageButton、LinkButton、HyperLink区别 2010-07-29 10:07:55| 分类&#xff1a; ASP.NET|字号 订阅 这4个控件都属于WEB服务器控件&#xff0c;有很多相同的属性和事件。其区别如下所示。在*.aspx页面中插入Button控件如以下代码所示。<asp:Button runat…

THINKPHP Yansongda 微信H5支付,公众号支付

说的无益&#xff0c;看代码就行了 更多支付方式请到https://pay.yansongda.cn/docs/v2/ 1. 微信H5支付 $config [appid > wxb3fxxxxxxxxxxx, // APP APPIDapp_id > appid, // 公众号 APPIDminiapp_id > wxb3fxxxxxxxxxxx, // 小程序 APPIDmch_id > merchant,ke…