bootstrap 上传 没搞懂

最新推荐文章于 2022-12-02 13:34:14 发布
最新推荐文章于 2022-12-02 13:34:14 发布
阅读量1.3k 收藏
点赞数
分类专栏： jquery 文章标签： bootstrap upload yii php

之前离职的同事写的，摘下来了，但是有些东西没搞懂

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap 101 Template</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet">

      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      
      <div class="form-inline">
         <input name="News[picture_url]" type="text" id="license_url" value="" readonly οnclick="open_upload('license_url',6)" class="form-control" />
         <button type="button" οnclick="open_upload('license_url',6)" class="btn btn-sm btn-info">上传</button>
      </div>

      <!-- uploadfile modal -->
      <div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
         <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-header">
                  <h4 class="modal-title">上传的图片</h4>
               </div>
               <div class="modal-body">
                  <form action="/upload/index" method="post" role="form" target="up_frame" οnsubmit="return chk();" enctype="multipart/form-data">
                     <div class="form-group form-inline">
                        <label for="exampleInputFile">选择上传的文件 </label>
                        <input type="hidden" value="" name="filetype" id="filetype" />
                        <input type="hidden" value="" name="control" id="control" />
                        <input type="file" id="files" name="fileup" class="form-control input-sm" id="exampleInputFile" accept="image/gif, image/jpeg, image/x-png" />
                        <p class="help-block">请选择图文件，文件大小要求小于1024Kb</p>
                        <p align="center">
                           <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-open" title="open"></i>上传文件</button>   
                           <button type="button" class="btn btn-danger" οnclick="close_upload()"><i class="glyphicon glyphicon-ban-circle" title="ban-circle"></i>关闭上传</button>
                        </p>
                     </div>
                     <iframe src="" name="up_frame" id="up_frame" style="display:none" frameborder="0"></iframe>
                  </form>
               </div>
            </div>
         </div>
      </div>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="js/bootstrap.min.js"></script>
      <script type="text/javascript">
         function chk(){
            if (document.getElementById("files").value === "") {
               alert("上传文件不能为空");
               document.getElementById("files").focus();
               return false;
            };
         }

         function open_upload(e,s){
            $("#fileModal").modal("show");
            $("#files").val($("#"+e).val());
            $("#control").val(e);
            $("#filetype").val(s);
         }

         function close_upload(){
            $("#fileModal").modal("hide");
         }

         function upload_success(info, e, s, w_str){
            if (info=="ok") {
               $("#fileModal").modal("hide");
               var conl = document.getElementById(s);
               conl.value=e;
               $("#login-form").append(w_str);

                /*
               var objs=$.parseJSON(j_str);
               $("#width").val(objs.image_width);
               $("#height").val(objs.image_height);
               */


            }else{
               $("#fileModal").modal("hide");
               $("#x_alert").html(e);
               $("#x_alert").show();
               window.setTimeout(function(){
                  $("#x_alert").hide();
               },3000)
            }
         }


      </script>
   </body>
</html>

UploadController.php

<?php

/*
 * 此组件用来上传文件
 */

/**
 * Description of UploadController
 *
 * @author cityxiao
 */
class UploadController extends Controller{
    //put your code here
    
  //private $uppath="/zh_o2o/main/upload";
 
   // private $uppath="/upload";

	/**
     * @return array action filters
     */
    public function filters()
    {
            return array(
                    'accessControl', // perform access control for CRUD operations
                    'postOnly + delete', // we only allow deletion via POST request
            );
    }
    
    public function actionIndex(){
		//echo "<script>parent.upload_success('ok','hhhh','','')</script>";
        var_dump($_REQUEST);

		$up_dir=$this->uplad_dir();
        if($_REQUEST['control'] == 'license_url'){


        }
		$upfile=  CUploadedFile::getInstanceByName("fileup");
		$obj = $_POST["control"];
		$typ = $_POST["filetype"];

		$arr=json_decode(Yii::app()->params['imgthumb'],true);


		if(!is_null($upfile)){
           	$up_rule='gif,jpg,png,bmp,jpeg';

            $oldname = $upfile->getname();

            $news_name1=date("YmdHis").time();
			$news_name=$news_name1.".".$upfile->extensionName;
			$imagetype = strtolower($upfile->extensionName);
			//$filesize=$upfile->getSize();
            if($obj == 'license_url'){
                $basepath = str_replace("\\","/",Yii::app()->basepath);
                $basepath = trim($basepath,"/protected");
                echo $basepath;
                echo "99999";
                if($upfile->saveAs($up_dir.$news_name)){
                    $savepath = str_replace($basepath,"",$up_dir.$news_name);
                    echo "<script>parent.upload_success('ok','".$oldname."','".$obj."','<input type=\"test\" name=\"license_url\" value=\"{$savepath}\" hidden>')</script>";
                    exit;
                }else{
                    echo "fail!1";
                    exit;
                }

            }
			if(preg_match('/'.$upfile->extensionName.'/', $up_rule)){
				//判断图片大小
				$filesize=$upfile->getSize();
				if($filesize>10240*10240){
					echo "<script>alert('请上传小于1M的图片');</script>";
					exit;
				}
				if($upfile->saveAs($up_dir.$news_name))
				{
					//echo "<script>alert('ok');</script>";
					$filesplit="";
					$wid=100;
					$wei=100;
					$path=$up_dir.$news_name;
					
					switch($typ)
					{
						case 1:
							$first=strpos($arr['1'],'-');						
							$wid=substr($arr['1'],0,$first);
							$wei=substr($arr['1'],$first+1);
						break;
						case 2:
							$first=strpos($arr['2'],'-');						
							$wid=substr($arr['2'],0,$first);
							$wei=substr($arr['2'],$first+1);
						break;
						case 3:
							$first_line=strpos($arr['3'],'|');
							$arr['1']=substr($arr['3'],0,$first_line);
							$arr['2']=substr($arr['3'],$first_line+1);
							
							$first1=strpos($arr['1'],'-');
							$first2=strpos($arr['2'],'-');
							
							$wid1=substr($arr['1'],0,$first1);
							$wei1=substr($arr['1'],$first1+1);
							
							$wid2=substr($arr['2'],0,$first2);
							$wei2=substr($arr['2'],$first2+1);
						break;
						case 4:
							$first=strpos($arr['4'],'-');						
							$wid=substr($arr['4'],0,$first);
							$wei=substr($arr['4'],$first+1);
						break;
						case 5:
							$first=strpos($arr['5'],'-');						
							$wid=substr($arr['5'],0,$first);
							$wei=substr($arr['5'],$first+1);
						break;
						case 6:
							$first=strpos($arr['6'],'-');						
							$wid=substr($arr['6'],0,$first);
							$wei=substr($arr['6'],$first+1);
						break;
						case 7:
							$first=strpos($arr['7'],'-');						
							$wid=substr($arr['7'],0,$first);
							$wei=substr($arr['7'],$first+1);
						break;
						case 8:
							$first=strpos($arr['8'],'-');						
							$wid=substr($arr['8'],0,$first);
							$wei=substr($arr['8'],$first+1);
						break;
						case 9:
							$first=strpos($arr['9'],'-');						
							$wid=substr($arr['9'],0,$first);
							$wei=substr($arr['9'],$first+1);
						break;
						default:
							
						break;
					}
					//拼接新名称
					if($typ!=3){
						$pathnew=$up_dir.$news_name1.$wid."-".$wei.".".$upfile->extensionName;
					}else{
						$pathnew1=$up_dir.$news_name1.$wid1."-".$wei1.".".$upfile->extensionName;
						$pathnew2=$up_dir.$news_name1.$wid2."-".$wei2.".".$upfile->extensionName;
					}
					
					
					
					$im = null;
					
					if($imagetype == 'gif')
					{
						$im = imagecreatefromgif($path);
					}
					else if ($imagetype == 'jpg')
					{
						$im = imagecreatefromjpeg($path);
					}
					else if ($imagetype == 'png')
					{
						$im = imagecreatefrompng($path);
					}else if($imagetype == 'bmp')
                    {
                        $im =imagecreatefromwbmp($path);
                    }
					
					//生成缩略图
					if($typ!=3){
						$this->resizeImage($im,$wid,$wei,$pathnew,$imagetype);
					}else{
						$this->resizeImage($im,$wid1,$wei1,$pathnew1,$imagetype);
						$this->resizeImage($im,$wid2,$wei2,$pathnew2,$imagetype);
					}
				
					$up_dir=  str_replace($_SERVER['DOCUMENT_ROOT']."","", $up_dir);
					$json=json_encode($news_name);
					
					echo "<script>parent.upload_success('ok','".$up_dir.$news_name."','$obj','$json')</script>";
					
				}else{
					
					echo "<script>parent.upload_success('not','上传错误','$obj')</script>";
				}
			}
		}
		
	}

	private function resizeImage($im, $maxwidth, $maxheight, $name,$filetype) {
	
		//  edit by pan
		
		$pic_width = imagesx ( $im );
		$pic_height = imagesy ( $im );
		$cqdir=0;  //0 x轴  1 y轴
		
		if (($maxwidth && $pic_width > $maxwidth) || ($maxheight && $pic_height > $maxheight)) 
		{
			if ($maxwidth && $pic_width > $maxwidth) {
				$widthratio = $maxwidth / $pic_width;
				$resizewidth_tag = true;
			}
			
			if ($maxheight && $pic_height > $maxheight) {
				$heightratio = $maxheight / $pic_height;
				$resizeheight_tag = true;
			}
			
			if ($resizewidth_tag && $resizeheight_tag) {
				if ($widthratio < $heightratio)
				{
					$ratio = $heightratio;
					$cqdir=0;
				}
				else
				{
					$ratio = $widthratio;
					$cqdir=1;
				}
			}
			/*
			if ($resizewidth_tag && ! $resizeheight_tag)
			{
				$ratio = $widthratio;
			}
			if ($resizeheight_tag && ! $resizewidth_tag)
			{
				$ratio = $heightratio;
			}
			*/
			
			$newwidth = (Int)($pic_width * $ratio);
			$newheight = (Int)($pic_height * $ratio);
			
			
			//bool imagecopyresampled ( resource $dst_image , resource $src_image , int $dst_x , int $dst_y , int $src_x , int $src_y , int $dst_w , int $dst_h , int $src_w , int $src_h )
			
			
			if (function_exists ( "imagecopyresampled" )) {
				$newim = imagecreatetruecolor ( $maxwidth, $maxheight );
				if($cqdir==0)
				{
					//x 轴心裁切
					
					$xpix=(Int)((($pic_width-$maxwidth)*$ratio)/2);
					
					imagecopyresampled ( $newim, $im, 0, 0, $xpix, 0, $newwidth, $newheight, $pic_width, $pic_height );
					
				}else{
					//y 轴心裁切
					
					$ypix=(Int)((($pic_height-$maxheight)*$ratio)/2);
					
					imagecopyresampled ( $newim, $im, 0, 0, 0, $ypix, $newwidth, $newheight, $pic_width, $pic_height );
				}
			} else {
				$newim = imagecreate ( $maxwidth, $maxheight );
				if($cqdir==0)
				{
					//x 轴心裁切
					
					$xpix=(Int)(($pic_width-$maxwidth)/2);
					
					imagecopyresized ( $newim, $im, 0, 0, $xpix, 0, $newwidth, $newheight, $pic_width, $pic_height );
					
				}else{
					//y 轴心裁切
					
					$ypix=(Int)(($pic_height-$maxheight)/2);
					
					imagecopyresized ( $newim, $im, 0, 0, 0, $ypix, $newwidth, $newheight, $pic_width, $pic_height );
				}
				//imagecopyresized ( $newim, $im, 0, 0, 0, 0, $newwidth, $newheight, $pic_width, $pic_height );
			}
			
			imagejpeg ( $newim, $name );
			imagedestroy ( $newim );
		} else {
			//$name = $name . $filetype;
			imagejpeg ( $im, $name );
		}
	
	}

	private function uplad_dir(){
	
		$uppath=Yii::app()->params['sitepath']."/upload";
		
		$root_folder= $_SERVER['DOCUMENT_ROOT']. $uppath;
		
		
		if(!file_exists($root_folder))
		{
			mkdir($root_folder);
		}

		$uppath=$root_folder."/".date("Ymd").'/';

		
		if(!file_exists($uppath))
		{
			mkdir($uppath,0777);
		}

		return $uppath;
	}
	
    
}


Zoe_Wang_ing
关注
专栏目录
超详细解释XGBoost，一篇文章搞懂XGBoost
zzoo2200的博客
09-09 1万+
从工作原理、数学角度、参数的作用详细解析XGBoost
彻底搞懂 Node.js 中的 Require 机制(源码分析到手写实践)
程序员成长指北
10-30 6642
本文你能学到什么自己手写实现一个 require，面试用也可以。如何看 Node.js 源码require 函数是如何产生的？为什么在 module 中可以直接使用。require 加载...
BootstrapFileInput 图片上传插件 详解
12-23
插件描述：支持上传文件预览，ajax同步或异步上传，拖曳文件上传等炫酷的功能. 参考示例：http://www.jq22.com/jquery-info5231
Bootstrap-fileinput文件上传
砷碲 - Shendi
12-28 2750
最近在页面中需要用到文件上传，自己不是专业整前端的，页面用到了 bootstrap 所以随便找了个插件使用 下载 通过百度直接搜索 bootstrap-fileinput 就可以看到 github 所在地址 也可以直接点击下方链接进入选择版本下载 https://github.com/kartik-v/bootstrap-fileinput/releases 5.1.3版本，也是我用到的版本https://github.com/kartik-v/bootstrap-fileinput...
Bootstrap做一个简单的上传文件
m0_63805970的博客
03-26 3082
由于Web环境的特殊性，浏览器不允许直接Javasprict直接访问。 1）<input type="file">来实现文件的上传，filey英文文件的意识,。该元素还有一个multiple属性（html5新增），可以一次实现多个文件上传： <input type="file"mulitiple>! ! !注意不能“type="text" ”这样就不是上传文件了，text英文文本的意思 2）var file =document.querySelector("input")；先定
Bootstrap文件上传组件：Bootstrap fileinput
security_2015的博客
06-06 5853
一、使用方法1、导入依赖的js和css文件：<link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/fileinput.min.css" /> <script type="text/javascript" src="js/jquery-3.2.1.js" ></script> <s
bootstrap异步上传图片
qq_37219629的博客
03-18 447
参考上一步jfinal上传七牛云 1、引入jquery、bootstrap、bootstrap-fileinput 页面引入 form表单 js处理上传 控制层json返回 效果如下 上传成功效果
老师讲的真棒！这一次带你搞懂SpringBoot核心原理，王者笔记！
m0_56835488的博客
04-16 269
前言 在本篇文章开始前，我想想来回答一个问题：我为什么要写这一篇关于面试的文章？ 原因有三：第一，我想为每一个为梦想时刻准备着的”有心人“尽一份自己的力量，提供一份高度精华的Java面试清单；第二，目前市面上的面试题不是答案不准确就是内容覆盖太窄，所以提供一份经典而又准确的面试题是非常有必要的；第三，本文会对部分提供详细解读和代码案例，让大家知其然并知其所然，从而学到更多的知识。 或许这份面试题还不足以概括所有Java问题，但有了它，我相信你一定不会”败“的很惨，因为有哦了它，足以应对目前市面上绝大部分的J
彻底搞懂c语言--读完可以逐步成为大神--*（一）
oooooooooooooookjk的博客
08-27 628
我认同要打好语言的基础，但是很多人死在了学习的许多视频上，因此我们觉得学习github很重要，编程南就是yinwei很多人不喜欢不习惯从项目入手，了解一个项目使用github项目会大大增加我们学习的兴趣，至于基础的东西我觉得看看《c和指针》就非常不错了，再配合廖雪峰的GIthub项目。我相信你也能如鱼得水 但其实还不够，因为我们还有很多的细节不了解，今天我们一起来消灭这些拦路虎。 打开了一个ESP...
Java版点餐小程序2022最新版笔记，Springboot+Mysql+Freemarker+Bootstrap+微信小程序实现扫码点餐小程序
编程小石头
03-19 1万+
今天来给大家讲解一个完整的微信小程序点餐项目。java后台+微信小程序实现点餐系统。 第一章，技术选型 1,后台技术选型： JDK8/Java11 Mysql5.7/Mysql8 Spring-boot2.2.4 Spring-data-jpa Lombok Freemarker Bootstrap4.3 Websocket即时通讯 Tomcat服务器 Excel数据的批量导入与导出 2,小程序端技术选型 微信小程序 css3 JavaScript 第二章，效果图 1， 管理后台 .
bootstrapfileinput实现文件自动上传
09-01
主要介绍了bootstrapfileinput实现文件自动上传,bootstrap fileinput插件对多种类型的文件提供文件预览，并且提供了多选等功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap 4自定义文件上传插件
12-10
这是一款Bootstrap 4自定义文件上传插件。该插件在原生bootstrap文件上传的基础上，添加了一些功能，例如显示单文件或多文件的文件路径等。
bootstrap fileinput上传组件和form表单一起提交
最新发布
人的一生就是在学习的道路上不断进步
12-02 3620
bootstrap fileinput上传组件和form表单一起提交
超级详细的bootstrap-fileinput使用经验（一：增加页面的文件上传）
xyhxuyonghao的博客
10-11 6247
超级详细的bootstrap-fileinput使用经验（一：增加页面的文件上传）
基于Springboot+Bootstrap的文件管理全套解决方案（文件列表、上传、预览、下载、删除、打包下载等）
hanxiaozhang的博客
05-01 8416
前言： 最近，不知道是不是最后一搏，事业群上层领导要求7天内完成ABS项目中保理系统的一期开发。需求评审会后，我发现各个功能模块都有大量的文件材料展示与上传，为了提高开发效率，我与组长商量，我先开发文件模块，为其他同事提供公共方法，减少重复工作。 使用的前端技术栈：Bootstrap、Bootstrap-table、layer.js、layui.js、jquery.media.js 设计思路...
springboot部署服务器上传文件报错解决办法
Dxide的博客
02-23 589
可尝试使用管理员身份运行springboot项目
Asp.Net MVC的几个文件上传方式
weixin_30419799的博客
08-10 83
MVC表单 优点：学习成本低；操作方便无需额外代码； 缺点：外观一般；无法实时查看上传的效果； 中性：同步上传； <!--CSHTML: 一定不要少了enctype = "multipart/form-data",否则，控制器收不到文件 --> @using (Html.BeginForm("#Uploader_Save","#控制器名称",FormMethod....
Bootstrap 上传文件或者图片的使用，亲测有效
Little_Code的博客
01-13 8741
多文件上传
Bootstrap File Input，最好用的文件上传组件
热门推荐
沉默王二
01-29 24万+
本篇介绍如何使用bootstrap fileinput.js（最好用的文件上传组件）来进行图片的展示，上传，包括springMVC后端文件保存。
Bootstrap FileInput上传插件详解与实例
"bootstrap fileinput 上传插件的基础使用" Bootstrap FileInput是一款强大的文件上传插件，它可以极大地提升网站上传功能的用户体验，使界面更加友好。该插件是基于流行的Bootstrap框架设计的，提供了丰富的定制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值