王明昌博客如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址 点击此处跳转
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
<script type="text/javascript" src="__STATIC__/jquery-1.8.3.min.js"></script> <link rel="stylesheet" type="text/css" href="__STATIC__/webuploader/webuploader.css"> <script type="text/javascript" src="__STATIC__/webuploader/webuploader.js"></script> <div class = "row"> <div class="btns col-sm-2"> <div id="picker">选择文件</div> <span type="button" id="ctlBtn" class="btn layui-btn default-btn">开始上传</span> </div> <!--用来存放文件信息--> <div id="thelist" class="uploader-list col-sm-10"> </div> </div> <script type="text/javascript"> $(function(){ var uploader = WebUploader.create({ // 选完文件后，是否自动上传。 auto: true, // 文件接收服务端。 server: "{:url('common/upload_some')}", // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#picker', // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ resize: false, // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }, /* fileSizeLimit :10, //验证文件总大小是否超出限制, 超出则不允许加入队列 fileSingleSizeLimit :10, //验证单个文件大小是否超出限制, 超出则不允许加入队列。 */ duplicate :true //去重， 根据文件名字、文件大小和最后修改时间来生成hash Key. }); // 当文件被加入队列之前触发，此事件的handler返回值为false，则此文件不会被添加进入队列。 uploader.on( 'beforeFileQueued', function( file ) { // 限制图片数量 img_length = $("#thelist img").length; if (img_length >= 6) { layer.msg("图片最多上传6张"); return false; } }); // 当有文件添加进来的时候 uploader.on( 'fileQueued', function( file ) { var $li = $( '<div id="' + file.id + '" class="file-item thumbnail layui-col-md3" style="width:150px;margin-left:10px;">' + '<img>' + '<span style="margin-left: 78%;cursor:pointer;" onclick="deleteFile(this)">删除</span>' + '</div>' ), $img = $li.find('img'); // $list为容器jQuery实例 $("#thelist").append( $li ); // 创建缩略图 // 如果为非图片文件，可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith('<span>不能预览</span>'); return; } $img.attr( 'src', src ); }, 150, 150 ); }); // 文件上传成功，给item添加成功class, 用样式标记上传成功。 uploader.on( 'uploadSuccess', function( file,response ) { $( '#'+file.id ).addClass('upload-state-done'); var $li = $( '#'+file.id ), $done = $li.find('div.upload-state-done'); console.log(response); // 避免重复创建 if ( !$done.length ) { $done = $('<div class=""></div>').appendTo( $li ); } $done.html('<input type="hidden" name="album_list[]" value="'+response.msg+'" />'); }); // 文件上传失败，显示上传出错。 uploader.on( 'uploadError', function( file ) { var $li = $( '#'+file.id ), $error = $li.find('div.error'); // 避免重复创建 if ( !$error.length ) { $error = $('<div class="error"></div>').appendTo( $li ); } $error.html('<font color="red">上传失败</font>'); }); $("#ctlBtn").click(function(){ uploader.upload(); }) }) function deleteFile(obj) { $(obj).parent().remove(); } </script> public function upload_one() { $file = request()->file(); // 移动到框架应用根目录/public/uploads/ 目录下 $file = $file['file']; if($file){ $info = $file->move(ROOT_PATH . 'public\data' . DS . 'upload'); if($info){ $msg = '/public/data/upload/'.$info->getSaveName(); return jssuccess($msg); }else{ // 上传失败获取错误信息 return jserror($file->getError()); } }else{ return jserror("error"); } } |
