1. //控制器文件
  2.     public function index(){
  3.  
  4. 		if(!empty($_POST)){
  5.  
  6. 			$file = $_FILES["file"];
  7. 			if(!isset($file['tmp_name']) || !$file['tmp_name']) {
  8. 				$this->ajaxReturn(['code' => 401, 'msg' => '没有文件上传']);
  9. 				return false;
  10. 			}
  11. 			if($file["error"] > 0) {
  12. 				$this->ajaxReturn(['code' => 402, 'msg' => $file["error"]]);
  13. 				return false;
  14. 			}
  15.  
  16. 			$upload_path = $_SERVER['DOCUMENT_ROOT'].".".__ROOT__."/Public/upload/";
  17. 			//  D:/wamp/www/1120/Public/upload
  18. 			//    /1120/tp/Public/upload/
  19. 			$file_path   = __ROOT__."/Public/upload/";
  20.  
  21. 			if(!is_dir($upload_path)){
  22. 				$this->ajaxReturn(['code' => 403, 'msg' => '上传目录不存在']);
  23. 				return false;
  24. 			}
  25. 			if(move_uploaded_file($file["tmp_name"], $upload_path.$file['name'])){
  26. 				$this->ajaxReturn(['code' => 200, 'src' => $file_path.$file['name']]);
  27. 				return false;
  28. 			}else{
  29. 				$this->ajaxReturn(['code' => 404, 'msg' => '上传失败']);
  30. 				return false;
  31. 			}
  32. 		}
  33.  
  34. 		$this->show();
  35.  
  36. 	}
  37.  
  38. 	public function test(){
  39. 		if(!empty($_POST)){
  40.  
  41. 			$upd = new \Think\Upload();
  42. 			$upd->rootPath = "./Public/";
  43. 			$upd->savePath = "./upload/";
  44. 			$info = $upd->upload();
  45.  
  46. 		}else{
  47. 			$this->show();
  48. 		}
  49. 	}

引入文件

  1. <link href="__PUBLIC__/ajaxImageUpload/css/upload.css" type="text/css" rel="stylesheet" />
  2. <script src="__PUBLIC__/ajaxImageUpload/js/jquery.js"></script>
  3. <script src="__PUBLIC__/ajaxImageUpload/js/upload.js"></script

upload.css样式

  1. /*上传图片插件的样式*/
  2.  
  3. .upload-box{
  4.     padding: 0 20px;
  5. 	margin: 0 auto;
  6. 	margin-top: 40px;
  7. }
  8.  
  9. .upload-box .clear{
  10. 	clear: both;
  11. }
  12.  
  13. .upload-box .clear:after{
  14. 	content: '';
  15. 	display: block;
  16. 	clear: both;
  17. }
  18.  
  19. .upload-box .upload-tip{
  20. 	margin-bottom: 20px;
  21. 	font-size: 16px;
  22. 	color: #555;
  23. }
  24. .upload-box .image-box{
  25. 	padding: 18px;
  26. 	border:2px dashed #E7E6E6;
  27. }
  28.  
  29. .image-box section{
  30. 	position: relative;
  31. 	width: 190px;
  32. 	height: 190px;
  33. 	float: left;
  34. }
  35.  
  36. .image-box .upload-section{
  37. 	position: relative;
  38. }
  39.  
  40. .image-box .image-section{
  41. 	margin-right: 20px;
  42. 	margin-bottom: 20px;
  43. }
  44.  
  45. .image-section:hover{
  46. 	border: 1px solid #f15134;
  47. }
  48.  
  49. /*/图片遮罩层样式*/
  50. .image-section .image-shade{
  51. 	display: block;
  52. 	width: 100%;
  53. 	height: 100%;
  54. 	visibility: hidden;
  55. 	position: absolute;
  56. 	top: 0px;
  57. 	left: 0px;
  58. 	z-index: 9;
  59. 	background: rgba(0,0,0,.5);
  60. }
  61.  
  62. /*鼠标放上去时显示遮罩层*/
  63. .image-section:hover .image-shade{
  64. 	visibility: visible;
  65. }
  66.  
  67. .image-section .image-zoom {
  68.     position: absolute;
  69.     width: 32px;
  70.     height: 32px;
  71.     top: 80px;
  72.     right: 80px;
  73.     display: none;
  74.     z-index: 10;
  75.     background:url(../images/zoom.png) no-repeat center;
  76. }
  77.  
  78. .image-section .image-delete {
  79. 	position: absolute;
  80. 	width: 30px;
  81. 	height: 30px;
  82. 	top: 5px;
  83. 	right: 5px;
  84. 	display: none;
  85. 	z-index: 10;
  86. 	background:url(../images/delete.png) no-repeat center;
  87. }
  88.  
  89. .image-section:hover .image-delete{
  90. 	display: block;
  91. 	cursor:pointer;
  92. }
  93.  
  94. .image-section:hover .image-zoom{
  95.     display: block;
  96.     cursor:pointer;
  97. }
  98.  
  99. .image-box .image-show{
  100. 	display: block;
  101. 	width: 100%;
  102. 	height: 100%;
  103. }
  104.  
  105. .image-loading{
  106.     border: 1px solid #D1D1D1;
  107. 	background:url(../images/loading.gif) no-repeat center;
  108. }
  109.  
  110. .image-opcity{
  111. 	opacity: 0;
  112. }
  113.  
  114. /*上传域样式*/
  115. .upload-section #upload-input{
  116. 	width: 100%;
  117. 	height: 100%;
  118. 	opacity: 0;
  119. 	position: absolute;
  120. 	top: 0px;
  121. 	left: 0px;
  122. 	z-index: 100;
  123. }
  124.  
  125. /*上传按钮样式*/
  126. .upload-section .upload-btn {
  127. 	border:1px dashed #d0d0d0;
  128. 	width: 190px;
  129. 	height: 190px;
  130. 	background:url(../images/upload.png) no-repeat center;
  131. }
  132.  
  133. /*遮罩层样式*/
  134. .delete-modal{
  135. 	z-index: 1000;
  136. 	display: none;
  137. 	position: fixed;
  138. 	top: 0px;
  139. 	left: 0px;
  140. 	width: 100%;
  141. 	height: 100%;
  142. 	background: rgba(0,0,0,.4);
  143. }
  144. .delete-modal .modal-content{
  145. 	 width: 500px;
  146. 	 position: absolute;
  147. 	 top: 50%;
  148. 	 left: 50%;
  149. 	 margin-left: -250px;
  150. 	 margin-top: -80px;
  151. 	 background: white;
  152. 	 height: 160px;
  153. 	 text-align: center;
  154. }
  155.  
  156. .modal-content p{
  157. 	margin: 0;
  158. 	padding: 0;
  159. }
  160. .modal-content .modal-tip{
  161. 	color: #555;
  162. 	height: 94px;
  163. 	line-height: 94px;
  164. 	font-size: 18px;
  165. 	border-bottom: 1px solid #D1D1D1;
  166. }
  167. .modal-content .modal-btn{
  168.  
  169. 	height: 66px;
  170. 	line-height: 66px;
  171. 	position: absolute;
  172. 	bottom: 0px;
  173. 	left: 0px;
  174. 	width: 100%;
  175. }
  176. .modal-content .modal-btn span{
  177. 	width: 49.8%;
  178. 	display:inline-block;
  179. 	text-align: center;
  180. 	color:#d4361d ;
  181. 	font-size: 18px;
  182. 	border-right: 1px solid #D1D1D1;
  183. }
  184.  
  185. .modal-btn:hover span{
  186.     cursor:pointer;
  187. }
  188.  
  189. /*图片预览样式*/
  190. #zoom-shade {
  191.     position: absolute;
  192.     top: 0;
  193.     left: 0;
  194.     width: 100%;
  195. 	min-height: 800px;
  196.     height: 100%;
  197.     z-index: 1100;
  198.     background-color: rgb(119, 119, 119);
  199.     opacity: 0.7;
  200.     cursor: pointer;
  201.     display: none;
  202. }
  203. #zoom-box {
  204.     position: absolute;
  205.     padding: 20px;
  206.     z-index: 1101;
  207.     outline: none;
  208.     display: none;
  209.     height: auto;
  210.     top: 25%;
  211.     left: 25%;
  212. }
  213.  
  214. #zoom-content {
  215.  
  216.     outline: none;
  217.     overflow: hidden;
  218.     z-index: 1102;
  219.     border: 10px solid #fff;
  220.     opacity: 1;
  221. }
  222. #zoom-content img {
  223.     width: 100%;
  224.     height: 100%;
  225.     padding: 0;
  226.     margin: 0 auto;
  227.     border: none;
  228.     outline: none;
  229.     line-height: 0;
  230.     vertical-align: top;
  231. }

upload.js文件

  1. /**
  2.  * author:gouguoyin
  3.  * qq:245629560
  4.  * doc:http://www.gouguoyin.cn/js/141.html
  5.  */
  6. (function($){
  7.     $.fn.ajaxImageUpload = function(options){
  8.  
  9.         var defaults = {
  10.  
  11.             data: null,
  12.             url: '',
  13.             zoom: true,
  14.             allowType: ["gif", "jpeg", "jpg", "bmp",'png'],
  15.             maxNum: 10,
  16.             hidenInputName: '', // 上传成功后追加的隐藏input名，注意不要带[]，会自动带[]，不写默认和上传按钮的name相同
  17.             maxSize: 2, //设置允许上传图片的最大尺寸，单位M
  18.             success: $.noop, //上传成功时的回调函数
  19.             error: $.noop //上传失败时的回调函数
  20.  
  21.         };
  22.  
  23.         var thisObj = $(this);
  24.         var config  = $.extend(defaults, options);
  25.  
  26.         var uploadBox = $(".upload-box");
  27.         var imageBox  = $(".image-box");
  28.         var inputName = thisObj.attr('name');
  29.  
  30.         // 设置是否在上传中全局变量
  31.         isUploading  = false;
  32.  
  33.         thisObj.each(function(i){
  34.             thisObj.change(function(){
  35.                 handleFileSelect();
  36.             });
  37.         });
  38.  
  39.         var handleFileSelect = function(){
  40.  
  41.             if (typeof FileReader == "undefined") {
  42.                 return false;
  43.             }
  44.  
  45.             // 获取最新的section数量
  46.             var imageNum  = $('.image-section').length;
  47.  
  48.             var postUrl   = config.url;
  49.             var maxNum    = config.maxNum;
  50.             var maxSize   = config.maxSize;
  51.             var allowType = config.allowType;
  52.  
  53.             if(!postUrl){
  54.                 alert('请设置要上传的服务端地址');
  55.                 return false;
  56.             }
  57.  
  58.             if(imageNum + 1 > maxNum ){
  59.                 alert("上传图片数目不可以超过"+maxNum+"个");
  60.                 return;
  61.             }
  62.  
  63.             var files    = thisObj[0].files;
  64.             var fileObj  = files[0];
  65.  
  66.             if(!fileObj){
  67.                 return false;
  68.             }
  69.  
  70.             var fileName = fileObj.name;
  71.             var fileSize = (fileObj.size)/(1024*1024);
  72.  
  73.             if (!isAllowFile(fileName, allowType)) {
  74.  
  75.                 alert("图片类型必须是" + allowType.join("，") + "中的一种");
  76.                 return false;
  77.  
  78.             }
  79.  
  80.             if(fileSize > maxSize){
  81.  
  82.                 alert('上传图片不能超过' + maxSize + 'M，当前上传图片的大小为'+fileSize.toFixed(2) + 'M');
  83.                 return false;
  84.  
  85.             }
  86.  
  87.             if(isUploading == true){
  88.  
  89.                 alert('文件正在上传中，请稍候再试！');
  90.                 return false;
  91.  
  92.             }
  93.  
  94.             // 将上传状态设为正在上传中
  95.             isUploading = true;
  96.  
  97.             // 执行前置函数
  98.             var callback = config.before;
  99.  
  100.             if(callback && callback() === false){
  101.                 return false;
  102.             }
  103.  
  104.             createImageSection();
  105.  
  106.             ajaxUpload();
  107.  
  108.         };
  109.  
  110.         var ajaxUpload = function () {
  111.  
  112.             // 获取最新的
  113.             var imageSection = $('.image-section:first');
  114.             var imageShow    = $('.image-show:first');
  115.  
  116.             var formData = new FormData();
  117.  
  118.             var fileData = thisObj[0].files;
  119.  
  120.             if(fileData){
  121.  
  122.                 // 目前仅支持单图上传
  123.                 formData.append(inputName, fileData[0]);
  124.  
  125.             }
  126.  
  127.             var postData = config.data;
  128.  
  129.             if (postData) {
  130.                 for (var i in postData) {
  131.  
  132.                     formData.append(i, postData[i]);
  133.  
  134.                 }
  135.             }
  136.  
  137.             // ajax提交表单对象
  138.             $.ajax({
  139.                 url: config.url,
  140.                 type: "post",
  141.                 data: formData,
  142.                 processData: false,
  143.                 contentType: false,
  144.                 dataType: 'json',
  145.                 success:function(json){
  146.  
  147.                     if(json.code == 200 && !json.src){
  148.                         alert('服务器返回的json数据中必须包含src元素');
  149.                         imageSection.remove();
  150.                         return false;
  151.                     }else if(json.code != 200){
  152.                         alert(json.msg);
  153.                         imageSection.remove();
  154.                         return false;
  155.                     }
  156.  
  157.                     imageSection.removeClass("image-loading");
  158.                     imageShow.removeClass("image-opcity");
  159.  
  160.                     imageShow.attr('src', json.src);
  161.                     imageShow.siblings('input').val(json.src);
  162.  
  163.                     // 将上传状态设为非上传中
  164.                     isUploading = false;
  165.  
  166.                     // 执行成功回调函数
  167.                     var callback = config.success;
  168.                     callback(json);
  169.  
  170.                 },
  171.                 error:function(e){
  172.  
  173.                     imageSection.remove();
  174.                     // 执行失败回调函数
  175.                     var callback = config.error;
  176.                     callback(e);
  177.  
  178.                 }
  179.             });
  180.  
  181.         };
  182.  
  183.         var createDeleteModal = function () {
  184.  
  185.             var deleteModal   = $("<aside class='delete-modal'><div class='modal-content'><p class='modal-tip'>您确定要删除作品图片吗？</p><p class='modal-btn'> <span class='confirm-btn'>确定</span><span class='cancel-btn'>取消</span></p></div></aside>");
  186.             // 创建删除模态框
  187.             deleteModal.appendTo('.image-box');
  188.  
  189.             // 显示弹框
  190.             imageBox.delegate(".image-delete","click",function(){
  191.  
  192.                 // 声明全局变量
  193.                 deleteImageSection = $(this).parent();
  194.                 deleteModal.show();
  195.  
  196.             });
  197.  
  198.             // 确认删除
  199.             $(".confirm-btn").click(function(){
  200.  
  201.                 deleteImageSection.remove();
  202.  
  203.                 deleteModal.hide();
  204.  
  205.             });
  206.  
  207.             // 取消删除
  208.             $(".cancel-btn").click(function(){
  209.                 deleteModal.hide();
  210.             });
  211.  
  212.         };
  213.  
  214.         var createImageSection = function () {
  215.  
  216.             var hidenInputName = config.hidenInputName;
  217.  
  218.             if(!hidenInputName){
  219.                 hidenInputName = inputName;
  220.             }
  221.  
  222.             var imageSection = $("<section class='image-section image-loading'></section>");
  223.             var imageShade   = $("<div class='image-shade'></div>");
  224.             var imageShow    = $("<img class='image-show image-opcity' />");
  225.             var imageInput   = $("<input class='" + inputName + "' name='" + hidenInputName + "[]' value='' type='hidden'>");
  226.             var imageZoom    = $("<div class='image-zoom'></div>");
  227.             var imageDelete  = $("<div class='image-delete'></div>");
  228.  
  229.             imageBox.prepend(imageSection);
  230.  
  231.             imageShade.appendTo(imageSection);
  232.             imageDelete.appendTo(imageSection);
  233.             // 判断是否开启缩放功能
  234.             if(config.zoom && config.zoom === true ){
  235.                 imageZoom.appendTo(imageSection);
  236.             }
  237.  
  238.             imageShow.appendTo(imageSection);
  239.             imageInput.appendTo(imageSection);
  240.  
  241.             return imageSection;
  242.  
  243.         };
  244.  
  245.         var createImageZoom = function () {
  246.  
  247.             var zoomShade   = $("<div id='zoom-shade'></div>");
  248.             var zoomBox = $("<div id='zoom-box'></div>");
  249.             var zoomContent = $("<div id='zoom-content'><img src='http://www.jq22.com/demo/jqueryfancybox201707292345/example/4_b.jpg'></div>");
  250.  
  251.             uploadBox.append(zoomShade);
  252.             uploadBox.append(zoomBox);
  253.  
  254.             zoomContent.appendTo(zoomBox);
  255.  
  256.             // 显示弹框
  257.             imageBox.delegate(".image-zoom","click",function(){
  258.  
  259.                 var src = $(this).siblings('img').attr('src');
  260.                 zoomBox.find('img').attr('src', src);
  261.  
  262.                 zoomShade.show();
  263.                 zoomBox.show();
  264.  
  265.             });
  266.  
  267.             // 关闭弹窗
  268.             uploadBox.delegate("#zoom-shade","click",function(){
  269.  
  270.                 zoomShade.hide();
  271.                 zoomBox.hide();
  272.  
  273.             });
  274.  
  275.         };
  276.  
  277.         //获取上传文件的后缀名
  278.         var getFileExt = function(fileName){
  279.             if (!fileName) {
  280.                 return '';
  281.             }
  282.  
  283.             var _index = fileName.lastIndexOf('.');
  284.             if (_index < 1) {
  285.                 return '';
  286.             }
  287.  
  288.             return fileName.substr(_index+1);
  289.         };
  290.  
  291.         //是否是允许上传文件格式
  292.         var isAllowFile = function(fileName, allowType){
  293.  
  294.             var fileExt = getFileExt(fileName).toLowerCase();
  295.             if (!allowType) {
  296.                 allowType = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
  297.             }
  298.  
  299.             if ($.inArray(fileExt, allowType) != -1) {
  300.                 return true;
  301.             }
  302.             return false;
  303.  
  304.         };
  305.  
  306.         // 判断是否开启缩放功能
  307.         if(config.zoom && config.zoom === true ){
  308.             createImageZoom();
  309.         }
  310.  
  311.         createDeleteModal();
  312.  
  313.     };
  314.  
  315. })(jQuery);

images     

布局html样式

  1. <div class="upload-box">
  2.     <p class="upload-tip">测试上传</p>
  3.     <div class="image-box clear">
  4.         <section class="upload-section">
  5.             <div class="upload-btn"></div>
  6.             <input type="file" name="file" class="upload-input" id='js_uploadBtn' value=""/>
  7.         </section>
  8.     </div>
  9. </div>

js文件

  1. <script type="text/javascript">
  2. $("#js_uploadBtn").ajaxImageUpload({
  3.     url: '__ACTION__', //上传的服务器地址
  4.     data: { name:'测试' },
  5.     maxNum: 2, //允许上传图片数量
  6.     hidenInputName:'', // 上传成功后追加的隐藏input名，注意不要带[]，会自动带[]，不写默认和上传按钮的name相同
  7.     zoom: true, //允许上传图片点击放大
  8.     allowType: ["gif", "jpeg", "jpg", "bmp",'png'], //允许上传图片的类型
  9.     maxSize :2, //允许上传图片的最大尺寸，单位M
  10.     before: function () {
  11.         alert('上传前回调函数');
  12.     },
  13.     success:function(data){
  14.         alert('上传成功回调函数');
  15.         console.log(data);
  16.     },
  17.     error:function (e) {
  18.         alert('上传失败回调函数');
  19.         console.log(e);
  20.     }
  21. });
  22. </script>

========

TP图片上传的更多相关文章

  1. TP框架配合jquery进行3种方式的多图片上传

    用的TP5.1框架+jquery 一 使用form表单方式进行多图片上传 html代码: <form action="../admin/admin/cs" enctype=& ...

  2. jquery之图片上传

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. TP3.2 图片上传及缩略图

    基于TP自带的上传文件的类, Think/Upload.class.php 设置表单的enctype属性 下面是上传的具体方法 /** * 图片上传处理 * @param [String] $path ...

  4. ThinkPHP3.1.3 整合 UEditor百度编辑器 图片上传

    第一步.前端模板实例化百度编辑器 <js file='__ROOT__/Data/UEditor/ueditor.config.js' /> <js file='__ROOT__/D ...

  5. layui加tp5图片上传实例

    <div class="layui-fluid"> <div class="layui-row"> <form class=&qu ...

  6. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  7. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  8. JS图片上传预览插件制作（兼容到IE6）

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  9. HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

随机推荐

  1. Instruments学习之Core Animation学习

    当App发展到一定的规模,性能优化就成为必不可少的一点.但是很多人,又对性能优化很陌生,毕竟平常大多时间都在写业务逻辑,很少关注这个.最近在优化自己的项目,也收集了很多资料,这里先浅谈一下使用Inst ...

  2. [hyperscan][pkg-config] hyperscan 从0到1路线图

    经过一系列的研究学习,知识储备之后,终于,可以开始研究hyperscan了. [knowledge][模式匹配] 字符匹配/模式匹配 正则表达式 自动机 [knowledge][perl][pcre] ...

  3. linux strncpy()和strcat使用总结

    strcat原型:char *strcat(char *dest,const char *src); 把src所指字符串添加到dest结尾处(覆盖dest结尾处的'\0')并添加'\0'.src和de ...

  4. VSCode代码修改后跑起来没反应，打开本地文件，代码没变化

    两种解决办法: 首先:修改VSCode默认配置文件,点击左下角设置标志图 -> 设置,出来了设置相关的东西,搜索 files.autoSave 第一种:把"files.autoSave ...

  5. jquery重置表单

    表单一般都有重置功能,在重置表单时需要将各个输入框中的值清空,如果输入框比较多,一个一个清空会比较麻烦,使用jquery的方法直接将表单中的所有输入框全部清空,首先给出一个form表单: <fo ...

  6. java应用零停机，时间索引重建（reindex）

    一个field的设置是不能被修改的,如果要修改一个Field,那么应该重新按照新的mapping,建立一个index,然后将数据批量查询出来,重新用bulk api写入index中 批量查询的时候,建 ...

  7. linux中按照指定内容查找文件

    grep -rnRi 指定的内容 * | awk -F":" '{print $1}' 解释: grep 查找文件内容 -r 表示递归查找 -n 表示显示行号 -R 表示查找所有文 ...

  8. 前端 HTML form表单标签 input标签 type属性 file 上传文件

     加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...

  9. Java基础知识（JAVA中String、StringBuffer、StringBuilder类的区别）

    java中String.StringBuffer.StringBuilder是编程中经常使用的字符串类,他们之间的区别也是经常在面试中会问到的问题.现在总结一下,看看他们的不同与相同. 1.可变与不可 ...

  10. Mac本如何卸载MySQL

    Mac本如何卸载MySQL 在Mac上卸载MySQL上一件非常麻烦的事,如果没有卸载干净,就会无法安装新的MySQL 怎样才能完全卸载MySQL呢?(包括所有数据库)    执行以下操作: #打开终端 ...