zoukankan      html  css  js  c++  java
  • 图片上传,可多图,可单图

    // 图片上传
    function upimg(obj,append,name,upimg)
      {
        if( obj.value == "" ) {
          return;
        }
        var click_upimg = "'"+upimg+"'";
        var click_append = "'"+append+"input'";
        var formdata = new FormData();
        //<input type="file" name="img" value="" />
        formdata.append("img" , $(obj)[0].files[0]);//获取文件法二
        $.ajax({
          type : 'post',
          url : 'index.php?a=swfupload&m=asset&g=asset', //接口
          data : formdata,
          cache : false,
          processData : false, // 不处理发送的数据,因为data值是Formdata对象,不需要对数据做处理
          contentType : false, // 不设置Content-type请求头
          success : function(response){
            var html = '<div style="position: relative;margin-right: 20px;margin-bottom: 15px; 132px;display: inline-block;border: 1px solid #CCC;background:#EEE;">'
                +'<span style="display: block; 120px;height: 80px;border: 1px solid #F2F1F0;margin: 5px;overflow: hidden;">'
                +'<img src="'+response+'" style=" 100%;" />'
                +'</span>'
                +'<input type="hidden"  name="'+name+'" value="'+response+'" />'
                +'<a onclick="delImg(this,'+click_upimg+');" style="z-index: 10;display: block;top: -8px;cursor:pointer;right: -8px;position:absolute; 20px;height: 20px;background: #CCC;border-radius:100%;text-align:center;line-height: 20px;border: 1px solid #C1C1C1;color: #555;">X</a>'
                +'</div>';
            $('#'+append+'').append(html);
            $("#"+upimg+"").attr("disabled","disabled");
          },
          error : function(){ }
        });
      }
     
      function delImg(obj,upimg)
      {
        $("#"+upimg+"").val(""); // 连续两次传相同图片处理
        $(obj).parent('div').remove();
        $("#"+upimg+"").removeAttr("disabled");
      }
     <span id="img-list-box" style="margin-left: 25px;"></span>
                 <span style="display:inline-block;height: 30px;position: relative;top:0px;left:0px;">
                 <a style="display: inline-block; 100px;height:30px;line-height: 30px;text-align:center;background: #F60;color: #FFF;">图片上传</a>
                 <input type="file" name="img_src" style=" 100px;border: 1px solid red;position: absolute;top:0px;left: 0px;height: 30px;opacity: 0;" id="up-img-file" onchange="upimg(this,'img-list-box','thumb','up-img-file')">
     </span>


    // 编辑

    <div class="form-group col-sm-12">
    <div class="col-sm-1"> </div>
    <label class="col-sm-2 control-label no-padding-right">推广图片</label>
    <div class="col-sm-5">

    <span id="img-list-box" style="margin-left: 25px;">
    <if condition="!empty($maketlist['maketimg'])">
    <div style="position: relative;margin-right: 20px;margin-bottom: 15px; 132px;display: inline-block;border: 1px solid #CCC;background:#EEE;">
    <span style="display: block; 120px;height: 80px;border: 1px solid #F2F1F0;margin: 5px;overflow: hidden;">
    <img src="{$maketlist.maketimg}" style=" 100%;" />
    </span>
    <input type="hidden" name="thumb" value="{$maketlist.maketimg}" />
    <a onclick="delImg(this,'up-img-file');" style="z-index: 10;display: block;top: -8px;cursor:pointer;right: -8px;position:absolute; 20px;height: 20px;background: #CCC;border-radius:100%;text-align:center;line-height: 20px;border: 1px solid #C1C1C1;color: #555;">X</a>
    </div>
    </if>

    
    


    </span>
    <span style="display:inline-block;height: 30px;position: relative;top:0px;left:0px;">
    <a style="display: inline-block; 100px;height:30px;line-height: 30px;text-align:center;background: #F60;color: #FFF;">图片上传</a>
    <input type="file" name="img_src" style=" 100px;border: 1px solid red;position: absolute;top:0px;left: 0px;height: 30px;opacity: 0;" id="up-img-file" onchange="upimg(this,'img-list-box','thumb','up-img-file')" <if condition="!empty($maketlist['maketimg'])"> disabled </if> >
    </span>
    </div>
    <div class="col-sm-4">
    <div class="tops-text validate-address">
    </div>
    </div>
    </div>

     
    //tp3方法 
    public function swfupload() { if (IS_POST) { //上传处理类 $config=array( 'rootPath' => 'data/upload/', 'savePath' => '', 'maxSize' => 11048576,//11048576 'saveName' => array('uniqid',''), 'exts' => array('jpg', 'gif', 'png', 'jpeg',"txt",'zip'), 'autoSub' => true, //'subName' => array('date', 'Ymd'), //子目录创建方式,[0]-函数名,[1]-参数,多个参数使用数组 'subName' => '', ); //$ftpConfig=C("ftp_config"); //$upload = new ThinkUpload($config,'Oss',$ftpConfig); $upload = new ThinkUpload($config);// $info = $upload->upload(); //开始上传 if ($info) { //上传成功 //写入附件数据库信息 $first=array_shift($info); // echo "1," . C("TMPL_PARSE_STRING.__UPLOADOSSURL__").$first['savename'].",".'1,'.$first['name']; echo C("TMPL_PARSE_STRING.__UPLOADOSSURL__").$first['savename']; exit; } else { //上传失败,返回错误 exit("0," . $upload->getError()); } } else { $limit=!empty($_GET['file_upload_limit']) ? $_GET['file_upload_limit'] : 1; $this->assign('limit',$limit); $this->display(); } } function aliyunoss($object,$filePath){ vendor("aliyunoss.autoload"); try { $ossClient = new OSSOssClient('', '', 'oss-cn-beijing-internal.aliyuncs.com', false); // oss账号 } catch (OssException $e) { $this->error = $e->getMessage(); } $bucket = 'cgsoftimage'; $ossClient->uploadFile($bucket,$object,$filePath); }

    //配置文件

    $nowtime = time();
    $now_year = date("Ymd", $nowtime);

    'TMPL_PARSE_STRING'=>array(
    '/Public/upload'=>'/data/upload',
    '__UPLOAD__' => __ROOT__.'/data/upload/',
    '__UPLOADC__' => 'http://img4.jhxms.cn/upload/cgsoft/'.$now_year.'/',
    '__UEUPLOAD__' => 'http://img4.jhxms.cn/upload/cgsoft/',
    '__UEDITORLOCAL__' => 'http://img4.jhxms.cn/upload/cgsoft/ueditor/'.$now_year.'/',
    '__UPLOADOSS__' => 'upload/cgsoft/'.$now_year.'/',
    '__UPLOADOSSURL__' => 'http://ossimg.jhxms.com/upload/cgsoft/'.$now_year.'/',
    '__UEDITORLOCALOSS__' => 'upload/cgsoft/ueditor/'.$now_year.'/',

    ),

    // 文件下载

    链接:https://pan.baidu.com/s/1ZR4ngEYRAb3CV-IRbC7ksQ
    提取码:espf
    复制这段内容后打开百度网盘手机App,操作更方便哦

     
  • 相关阅读:
    基础操作
    需要注意
    简单操作
    git指令-版本回退
    设计模式-代理模式
    在idea下遇到的问题汇总
    maven笔记--持续更新
    poi简介
    Win10添加右键在此处打开命令行
    Ajax&Json案例
  • 原文地址:https://www.cnblogs.com/yanyanyanyanliu/p/11212928.html
Copyright © 2011-2022 走看看