2. 程式人生 > >TP3.2：上傳預覽+縮圖+水印例項

TP3.2：上傳預覽+縮圖+水印例項

阿新 • • 發佈：2019-02-15
uploadify上傳預覽+縮圖+水印例項
首先感謝各位大神網友的分享，我只是改改程式碼，讓其更符合自己的業務邏輯
圖片上傳+縮圖+水印處理程式碼：
  1. //檔案上傳
  2. Publicfunction _upload( $thumb =false, $thumbWidth ='', $thumbHeight =''){
  3.         $upload =new \Think\Upload();// 例項化上傳類
  4.         $upload->maxSize =3145728;// 設定附件上傳大小
  5.         $upload->exts =  array('jpg','gif','png','jpeg'
    );// 設定附件上傳型別
  6.         $upload->savePath ='/'. CONTROLLER_NAME .'/';// 設定附件上傳目錄
  7.         $info = $upload->upload();
  8. if(!$info){
  9. return array('status'=>0,'info'=> $upload->getError());
  10. }else{
  11. if( $thumb ){//生成縮圖
  12.                 $image =new \Think\Image();
  13. foreach($info as $file){
  14.                     $thumb_file 
    ='./Uploads/'. $file['savepath']. $file['savename'];
  15.                     $save_path ='./Uploads/'.$file['savepath'].'mini_'. $file['savename'];
  16.                     $image->open( $thumb_file )->text('德興房產','./data/1.otf',30,'#A7AAA4',\Think\Image::IMAGE_WATER_SOUTHWEST)->save( $thumb_file );
  17.                     $image
    ->open( $thumb_file )->text('德興房產','./data/1.otf',24,'#A7AAA4',\Think\Image::IMAGE_WATER_SOUTHWEST)->thumb( $thumbWidth, $thumbHeight )->save( $save_path );
  18. return array(
  19. 'status'=>1,
  20. 'savepath'=> $file['savepath'],
  21. 'savename'=> $file['savename'],
  22. 'pic_path'=> $file['savepath']. $file['savename'],
  23. 'mini_pic'=> $file['savepath'].'mini_'.$file['savename']
  24. );
  25. }
  26. }else{
  27. foreach($info as $file){
  28. return array(
  29. 'status'=>1,
  30. 'savepath'=> $file['savepath'],
  31. 'savename'=> $file['savename'],
  32. 'pic_path'=> $file['savepath'].$file['savename']
  33. );
  34. }
  35. }
  36. }
  37. }
複製程式碼 前端主要程式碼（參考http://www.thinkphp.cn/code/151.html）：
  1. <divclass="tab-pane"id="tab3">
  2. <divclass="row">
  3. <divclass="col-md-12">
  4. <divclass="tab-pane">
  5. <divclass="form-group">
  6. <inputtype="file"id="upload"class="form-control input-medium"/>
  7. </div>
  8. <divstyle="width:100%;float:left;padding:10px20px20px; background-color:#ccc">
  9. <p>
  10. <ulclass="imagelist"id="image_result"></ul>
  11. </p>
  12. </div>
  13. </div>
  14. </div>
  15. </div>
  16. </div><!-- END #TAB3 -->
  17. <divclass="margin-top-10">
  18. <buttontype="submit"class="btn green ajax-post">確 認</button>
  19. <ahref="javascript:"onclick="javascript:history.back(-1);returnfalse;"class="btn default">返 回</a>
  20. </div>
  21. </div>
  22. </div>
  23. </form>
  24. </div>
  25. </div>
  26. </block>
  27. <blockname="foot">
  28. <linkhref="__PUBLIC__/assets/plugins/uploadify/uploadify.css"rel="stylesheet"type="text/css"/>
  29. <linkhref="__PUBLIC__/assets/plugins/uniform/css/uniform.default.css"rel="stylesheet"type="text/css"/>
  30. <scriptsrc="__PUBLIC__/assets/plugins/uniform/jquery.uniform.min.js"type="text/javascript"></script>
  31. <scriptsrc="__PUBLIC__/assets/plugins/uploadify/jquery.uploadify.min.js"type="text/javascript"></script>
  32. <scripttype="text/javascript">
  33.     $(function(){
  34. var sid ="{:session_id()}";
  35.         $('#upload').uploadify({
  36. 'swf':'__PUBLIC__/assets/plugins/uploadify/uploadify.swf',
  37. 'buttonText':'選擇圖片',
  38. 'formData':{'session_id':sid},
  39. 'uploader':"{:U('uploadPic')}",
  40. 'fileTypeDesc':'Image File',
  41. 'fileTypeExts':'*.jpg; *.jpeg; *.gif; *.png',
  42. 'auto':true,
  43. 'removeCompleted':false,
  44.             onUploadSuccess:function(file, data, response){
  45.                 $('#progress').hide();
  46. var result = $.parseJSON(data);
  47. //錯誤處理。。。
  48. if(result.status ==0){
  49.                     alert(result.info);
  50. returnfalse;
  51. }
  52. //上傳成功
  53. var id =Math.random().toString();
  54.                 id = id.replace('.','_');//生成唯一標示
  55. var html ='<li class="imageitem" id="'+id+'">';
  56.                     html+='<input type="hidden" name="file[]" value="'+result.pic_path+'">';//隱藏域，是為了把圖片地址入庫。。
  57.                     html+='<input type="hidden" name="minifile[]" value="'+result.mini_pic+'">';//隱藏域，是為了把圖片地址入庫。。
  58.                     html+='<img height="160" width="160" src="__ROOT__/Uploads/'+result.pic_path+'" />';
  59.                     html+='<span class="txt">';
  60.                     html+='<a title="刪除" href=javascript:remove("'+result.pic_path+'","'+id+'");><img src="__PUBLIC__/assets/plugins/uploadify/remove.png" /></a>';
  61.                     html+='<a title="設為封面" href=javascript:tocover("'+result.pic_path+'");><img src="__PUBLIC__/assets/plugins/uploadify/right.png" /></a>';
  62.                     html+='</span>';
  63.                     html+='<em><input class="form-control" value="'+file.name+'"></em>';
  64.                     html+='</li>';
  65.                 $('#image_result').append(html);
  66. },
  67.             onUploadStart:function(){
  68.                 $('#progress').text('正在上傳...');//使用者等待提示。
  69. },
  70.             onInit:function(){
  71.                 $("#upload-queue").hide();//隱藏上傳佇列                
  72. }
  73. });
  74. });
  75. function remove(file,id){
  76.         alert('刪除成功！'+"\r\n"+file);
  77.         $('#'+id).remove();
  78. }
  79. function tocover(file){
  80.         alert('設為封面成功'+"\r\n"+file);
  81. }
  82. function check(){
  83. if($('input[name="title"]').val()==""){
  84.             toastr['error']('標題不能為空！');
  85. returnfalse;
  86. }
  87. }
  88. </script>
  89. </block>
複製程式碼

相關推薦

TP3.2：上傳預覽+縮圖+水印例項

uploadify上傳預覽+縮圖+水印例項首先感謝各位大神網友的分享，我只是改改程式碼，讓其更符合自己的業務邏輯圖片上傳+縮圖+水印處理程式碼： //檔案上傳 Publicfunction _upl

微信JSSDK上傳預覽多圖，ios／Android。點選檢視大圖，支援滑動。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev

JS上傳圖片本地實時預覽縮圖

 <body>         <table width="100%" border="0" cellspacing="0" cellpadding="0">             <tbody>                

上傳圖片實時預覽縮圖

{   var image=new Image();   image.src=develop//develop/ImgD.src;if(image.width>0&& image.height>0){    flag=true;    if(image.width/image.he

圖片本地上傳預覽

dao tom favicon 查看 else ada author chang dataurl 在IE裏面顯示的話，你可以用div直接顯示圖片，不通過img來添加SRC，這樣就不會有小圖標出現 例子： <div class="banner_up_pic" id="i

圖片上傳預覽

bject too sca 圖片格式 else 遍歷 bsp turn filters Js腳本頁面 <!doctype html> <html> <head> <meta charset="utf-8"> <titl

頭像上傳預覽

float 路徑 utf 圖片 func 亂碼問題 文檔 http public 這個可以測試頭像預覽上傳 需要先將圖片放到服務器 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt

基於bootstrap的上傳插件fileinput實現ajax異步上傳功能(支持多文件上傳預覽拖拽)

允許 jquery pac locale 錯誤信息 部分 src alt date 首先需要導入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte

django頭像上傳預覽功能

頭像頁面格式 註冊頁面 這裏可以看到有頭像按鈕， 頭像需求 有默認的頭像 點擊頭像就可以上傳圖片 上傳圖片後可以預覽 生成默認的頭像 上傳默認圖片到指定文件夾，然後把img標簽的src指定到這裏就可以， 點擊頭像上傳圖片 默認添加了&lt;input type="file"&gt;後會在

前端 上傳預覽功能實現

rip log wid 直接 java ner box ava urn <div style="position: relative;"> <input id="files" type="file" onchange="previewIma

二十七、單張圖片上傳預覽

第一部分 ajax 效果 document 圖片 pos itl .data title html部分 <div class="new-store-phone"> <span class="phone-title">營業執照&nbsp;

jQuery多圖上傳預覽

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery多圖上傳預覽</title> <script src="http://libs.baidu

簡單的做一個圖片上傳預覽（web前端）

chrom 預覽 web前端 console fine 分享圖片 fire title right 轉載：點擊查看原文 在做web項目很多的時候圖片都是避免不了的，所以操作圖片就成了一個相對比較棘手的問題，其實也不是說很麻煩，只是說上傳然後直接預覽的過

html5實現圖片上傳預覽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #te

JS原生實現本地圖片上傳預覽

執行方式如下： $("input").change(function() { var config = { imgWrapWidth: 300, //px imgWrapHeight: 200, //px imgMaxWidth: "100%", im

vue自定義圖片上傳預覽功能

//vue裡面的HTML程式碼 <div id="modificationPreview">         <input type="file" accept="image/*" @change="changeFile" id="m

tp3.2 ajax上傳圖片(可以用,樣式要自己寫)

html頁面 <form id="mbInfoForm" action="" method="POST"> <input type="hidden" name="idcard_up" id="idcard_up"> <table class="formTbl">

圖片上傳預覽（可根據自己得需要封裝元件）

話不多說，先上圖   實現簡單得多行多圖片上傳，可以選擇其中任意一個圖片當作你需要得預設圖傳到後臺，然後一次性提交 圖片上傳重要得也就兩個屬性：new FormData()和new FileReader() 程式碼： <template> <

Thinkphp3.2.3 單圖上傳及生產縮圖

前端 <div class="layui-form-item"> <label class="layui-form-label">您的照片</label> <div class="layui-input-inline">

js圖片上傳預覽功能相容實現

<html> <head> <title>js圖片上傳預覽</title> <script> function PreviewImage(imgFile) { var filextension=imgFile.value.subst