<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                示例: tp3.1使用webuploader0.1.5插件多圖上傳,后臺php原生接收 [toc] ## :-: **效果** ![](https://box.kancloud.cn/59e943ccf68a48416f89fa40650e68d9_560x270.png) ![](https://box.kancloud.cn/73a63f6e48a8660dc0da5d6157b23b59_582x281.png) - 對應的效果是: 1、上傳圖片:選擇圖片-》開始上傳圖片(上傳成功后)-》會顯示圖片上傳成功 && 可以通過下拉框和文本框,一起提交給后端 2、刪除圖片:點擊刪除,刪除整個節點 3、修改圖片附屬信息:就是修改下拉框和文本框中的值 - 亮點在于: 1、前端代碼的38行,由于我這是存到3個字段,用戶不選,會存個默認值,所以會有對應的關系。這樣我取值的時候,就可以用圖片的$k,因為圖片的$k和$imgType的$type_k下標一樣 2、下拉框和文本框是通過 后端上傳成功后,動態添加的。可不刪圖片修改值 ## :-: **前端插件代碼** 前端代碼,保存在.php文件中 ``` php <body> <tr> <th> 教學資質 <div>上傳圖片</div> </th> <td> <!-- 如果 是空字符串就隱藏,否則就顯示xxx_type對應前臺是證書名稱,xxx_names對應前臺是證書編號--> <span>已上傳的圖片:</span> <div style="overflow: hidden" imgUrl="<?php echo $data['teacher_aptitude_imgs'];?>" id="is_show_img" > <!-- 查出來的字符串轉數組,然后遍歷顯示--> <!--圖片類型(對應前臺證書名稱)--> <?php $imgType = explode(',',$data['teacher_aptitude_imgs_type']); foreach ($imgType as $type_k => $type_v): ?> <?php endforeach;?> <!--圖片名稱(對應前臺證書編號)--> <?php $imgName = explode(',',$data['teacher_aptitude_imgs_names']); foreach ($imgName as $name_k => $name_v): ?> <?php endforeach;?> <!--圖片地址--> <?php $imgArr = explode(',',$data['teacher_aptitude_imgs']); foreach ($imgArr as $k => $v): ?> <div style="border:1px solid #CCCCCC;overflow: hidden;"> <div style="float: left;width: 33.3%;" class="del_img"> <div class="del_node"> <img src="http://<?php echo $v;?>" style="width:100px;height:100px;" > <!--點擊刪除圖片后,要在當前$v中刪掉這個圖片,并且將這張圖片在數據庫中刪除(更新)--> <a href="javascript:;" class="del_btn" style="color:red;" >刪除圖片</a> *證件名稱 <select name="imgs_types[]"> <option value="請選擇" <?php if($imgType[$k]=='請選擇'){ echo selected;}?> >請選擇</option> <option value="聯培證" <?php if($imgType[$k]=='聯培證'){ echo selected;}?> >聯培證</option> <!--循環出所有類型,并標記出默認--> <option value="教師資格證" <?php if($imgType[$k]=='教師資格證'){ echo selected;}?> >教師資格證</option> </select> *證書編號 <input class="del_imgs_names" type="text" name="imgs_names[]" imgs_names_key="<?php echo $k;?>" value="<?php echo $imgName[$k]?>" /> <!--刪除del_node節點的時候,要刪調這個節點--> <input type="hidden" name="img_url[]" value="<?php echo $v;?>" /> </div> </div> </div> <?php endforeach?> </div> <br /> <div id="uploader-demo"> <!--用來存放item--> <div style="width:800px;height:200px;margin-left:10px;" id="fileList" class="uploader-list"></div> <div id="filePicker">選擇圖片</div> <div style="width:78px;margin-top:10px;height: 38px;line-height: 38px;text-align: center;background: #0E774A;border-radius: 2px;"><a href="javascript:;" style="color:#fff;text-decoration: none;" id="start">開始上傳圖片</a></div> <div>支持jpg、png、jpeg格式,建議圖片大小不要超過10M</div> </div> </td> </tr> <script> var $list=$("#fileList"); //這幾個初始化全局的百度文檔上沒說明,好蛋疼 var thumbnailWidth = 100; //縮略圖高度和寬度 (單位是像素),當寬高度是0~1的時候,是按照百分比計算,具體可以看api文檔 var thumbnailHeight = 100; //初始化Web Uploader var uploader = WebUploader.create({ // 選完文件后,是否自動上傳。 auto: false, // swf文件路徑 swf: '<?php echo CSS_PATH;?>webuploader-0.1.5/Uploader.swf', server: '/index.php?m=teacher&c=teacher&a=uploadImg', // 文件接收服務端。 //duplicate :true,// 重復上傳圖片,true為可重復false為不可重復 // 選擇文件的按鈕,可選。內部根據當前運行是創建,可能是input元素,也可能是flash. pick: {id:'#filePicker'}, //第2個參數是修改按鈕上面的文字;如果是單圖上傳,將第3個參數 置為true // 只允許選擇圖片文件。 accept: { title: 'Images', extensions: 'jpg,jpeg,png', mimeTypes: 'image/*' }, //fileSingleSizeLimit :'10485760' //單張不能超10M。超過10M沒有任何提示,只是圖片不會添加到隊列,也就是選不上圖片 //fileVal:'xg', //默認是file 通過打印$FILES就能看到 //method:'post', //請求方式 //fileSizeLimit:'', //20張之和 如果 超過多少M,就不讓上傳。單位是字節 //fileNumLimit:20 //每次上傳,不能超過20張 }); //【圖片預覽】當有文件添加進來的時候,監聽fileQueued事件,通過uploader.makeThumb來創建圖片預覽圖。 uploader.on( 'fileQueued', function( file ) { // console.log(file); //上一行,匿名函數中的file var $li = $( '<div style="display:inline-block" id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<div class="info">' + file.name + '</div>' + '<span id="del" style="color:red;">刪除圖片</span>' + '<br /><span id="tis">等待上傳中....</span><progress value="0" max="100"></progress>' + '</div>' ), $img = $li.find('img'); // $list為容器jQuery實例 $list.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 ); }, thumbnailWidth, thumbnailHeight ); }); //【刪除圖片】 //這種是動態創建的,直接用click或live不行,獲取不到。不要綁定,可以在標簽中加自定義的函數onclick="aa()" $list.on('click','#del',function(){ //該事件是由$list中id=del的觸發的 var id = $(this).parent().attr('id'); //獲取$list上的id屬性 $(this).parent().remove(); //刪除html中的圖片 var quId = uploader.getFile(id); //獲取圖片在隊列中的id uploader.removeFile(quId,true); //刪除隊列中的圖片 }); //【手動上傳】往后臺發送 隊列 中的內容 $("#start").on('click',function(){ uploader.upload(); //對象 調 方法 }); //【進度條】文件上傳過程中創建進度條實時顯示。 uploader.on( 'uploadProgress', function( file, percentage ) { //第2個參數是當前的上傳進度,最大是1,所以要*100 $( '#'+file.id ).find('progress').val(percentage*100); $( '#'+file.id ).find('progress').css("background-color","yellow"); //藍色+黃色配成一個綠色進度條 }); //【成功】文件上傳成功,給item添加成功class, 用樣式標記上傳成功。 uploader.on( 'uploadSuccess', function(file,data) { //第2個參數是php返回的處理結果 console.log(data); $("#" + file.id).find('#del').remove(); //刪掉,刪除圖片 //這是前端的上傳成功,后端的成功和失敗都在這里處理 if(data.code == 1){ //上傳成功 $( '#'+file.id ).find('#tis').text(data.msg).css('color','green'); //進度條的提示語換成上傳成功,并將字的改成綠色的 $( '#'+file.id ).append('<input name="img_url[]" type="hidden" value="' + data.url + '">'); $( '#'+file.id ).append('*證書名稱 <select name="imgs_types[]">\n' + '<option value="請選擇" selected = "selected">請選擇</option>\n' + '<option value="聯培證">聯培證</option>\n' + '<option value="教師資格證">教師資格證</option>\n' + '</select>'); $( '#'+file.id ).append('*證書編號 <input type="text" name="imgs_names[]" value="請輸入圖片名稱">'); }else{ $( '#'+file.id ).find('#tis').text(data.msg).css('color','red'); //顯示上傳失敗 } }); //【失敗】文件上傳失敗,顯示上傳出錯。 uploader.on( 'uploadError', function( file ) { console.log('前端上傳失敗'); console.log(file); // var $li = $( '#'+file.id ), // $error = $li.find('div.error'); // // // 避免重復創建 // if ( !$error.length ) { // $error = $('<div class="error"></div>').appendTo( $li ); // } // // $error.text('前端上傳失敗'); }); // 完成上傳完了,成功或者失敗,先刪除進度條。 uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('progress').remove(); //刪除進度條 }); </script> </body> ``` ## :-: **后端php原生上傳代碼** ``` php /** * 原生上傳圖片 */ public function uploadImg(){ $file = $_FILES['file']; //接收上傳的圖片 if($file['size'] >= 10485760){ //大于10M $this->ajaxRtn(23,'圖片大于10M'); exit; }else{ if($file['error'] == 0){ //按照年月日創建目錄 $savePath='e:/'.date("Y").'/'.date("m").'/'.date("d"); _mkdir($savePath); //效驗文件格式 $fileType = explode('/',$file['type']); if(array_key_exists($fileType[1],['jpg','png'])){ $this->ajaxRtn(403,'圖片類型不對'); exit; } $filePath = DIR_MANAGE_PATH.'/'.rand(1111,9999).'.png'; //上傳到哪個位置 $uploadRes = move_uploaded_file($file['tmp_name'],$filePath); //【關鍵在這,上傳文件】 if($uploadRes){ //文件上傳成功 $obj = new \Think\Model('img'); //入庫 $data['img'] = $filePath; $res = $obj->add($data); //echo $obj->getLastSql(); $this->ajaxRtn(1,$filePath); //上傳成功返回圖片地址,以供顯示 if(!$res){ $this->ajaxRtn(2,'上傳失敗'); } } }else{ $this->ajaxRtn(22,'上傳錯誤'); } } } ``` ``` php /** * 返回狀態碼 * @param $code 狀態碼 * @param $message 信息 */ public function ajaxRtn($code,$message){ $msg = ['code'=>$code,'msg'=>$message]; echo json_encode($msg); } ``` ``` php function _mkdir($file_path){ //判斷給定文件名是否是一個目錄 if(!is_dir($file_path)){ mkdir($file_path,0755,true); } } ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看