Uploadify多上傳圖檔插件

html:

<code><</code><code>div</code> <code>class</code><code>=</code><code>"row cl"</code><code>></code>

<code> </code><code><</code><code>label</code> <code>class</code><code>=</code><code>"form-label col-3"</code><code>><</code><code>span</code> <code>class</code><code>=</code><code>"c-red"</code><code>>*</</code><code>span</code><code>>圖檔：</</code><code>label</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"formControls col-5"</code><code>></code>

<code> </code><code><</code><code>input</code> <code>id</code><code>=</code><code>"file_upload"</code> <code>name</code><code>=</code><code>"file_upload"</code> <code>type</code><code>=</code><code>"file"</code> <code>multiple</code><code>=</code><code>"true"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"preview"</code><code>></code>

<code> </code><code><</code><code>ul</code> <code>id</code><code>=</code><code>"previewImgs"</code><code>></</code><code>ul</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"col-4"</code><code>> </</code><code>div</code><code>></code>

需要引入的js、css:

<code><link type=</code><code>"text/css"</code> <code>rel=</code><code>"stylesheet"</code> <code>href=</code><code>"/public/uploadify/uploadify.css"</code><code>></code>

<code><script type=</code><code>"text/javascript"</code> <code>src=</code><code>"/public/uploadify/jquery-1.8.2.min.js"</code><code>></script></code>

<code><script type=</code><code>"text/javascript"</code> <code>src=</code><code>"/public/uploadify/jquery.uploadify.min.js"</code><code>></script></code>

JS代碼處理：

<code><script type=</code><code>"text/javascript"</code><code>></code>

<code> </code><code>$(</code><code>function</code><code>() {</code>

<code> </code><code>$(</code><code>'#file_upload'</code><code>).uploadify({</code>

<code> </code><code>'formData'</code><code>: {</code>

<code> </code><code>'uploader'</code> <code>: </code><code>'{:U("uploads")}'</code><code>+ </code><code>"?session_id=<?php echo session_id(); ?>"</code><code>,</code>

<code> </code><code>'swf'</code> <code>: </code><code>'__PUBLIC__/admin/uploadify/uploadify.swf'</code><code>,</code>

<code> </code><code>'auto'</code> <code>: </code><code>true</code><code>, </code><code>//是否自動開始上傳</code>

<code> </code><code>'debug'</code> <code>: </code><code>false</code><code>,</code><code>// 是否開啟浏覽器調試</code>

<code> </code><code>'buttonText'</code> <code>: </code><code>'請選擇圖檔'</code><code>, </code><code>// 上傳按鈕文字</code>

<code> </code><code>'fileTypeExts'</code> <code>:</code><code>'*.jpg;*.gif;*.bmp;*.png;*.jpeg'</code><code>, </code><code>//允許的圖檔類型</code>

<code> </code><code>'fileSizeLimit'</code> <code>: </code><code>'2MB'</code><code>, </code><code>// 允許的單張圖檔的自大值</code>

<code> </code><code>'multi'</code> <code>: </code><code>false</code><code>, </code><code>//是否允許多張圖檔一起上傳</code>

<code> </code><code>'uploadLimit'</code> <code>:6, </code><code>//允許上傳數量</code>

<code> </code><code>'successTimeout'</code> <code>: 10, </code><code>//等待伺服器響應時間</code>

<code> </code><code>'removeTimeout'</code> <code>: 0.2, </code><code>//成功顯示時間</code>

<code> </code><code>'onFallback'</code><code>:</code><code>function</code><code>(){</code>

<code> </code><code>alert(</code><code>"您未安裝FLASH控件，無法上傳圖檔！請安裝FLASH控件後再試。"</code><code>);</code>

<code> </code><code>'onUploadSuccess'</code> <code>: </code><code>function</code><code>(file,data,response){</code>

<code> </code><code>//alert(data);</code>

<code> </code><code>data = $.parseJSON(data);</code>

<code> </code><code>var</code> <code>Image = </code><code>"<div style='display:inline-block'><img src='"</code> <code>+ data.thumbpath + </code><code>"' class='img' style='margin-top:10px;width:150px;height:150px;position: relative;'/>\</code>

<code> </code><code><input type='hidden' name='image[]' id='image' value='"</code> <code>+ data.imgpath + </code><code>"' />\</code>

<code> </code><code><a class='del' onclick=goDel(this,'"</code><code>+data.thumbpath+</code><code>"')>删除</a></div>"</code><code>;</code>

<code> </code><code>if</code><code>($(</code><code>"a[class=del]"</code><code>).length>=5){</code>

<code> </code><code>alert(</code><code>"暫不支援5條以上！"</code><code>);</code>

<code> </code><code>$(</code><code>"#previewImgs"</code><code>).append(Image);</code>

<code> </code><code>// ajax 删除預覽清單中的一張圖檔</code>

<code> </code><code>function</code> <code>goDel(objdom,src){</code>

<code> </code><code>$(objdom).parent().remove();</code>

<code> </code><code>return</code> <code>false</code><code>;</code>

php背景處理圖檔傳回JSON資料：

<code>public</code> <code>function</code> <code>uploads (){</code>

<code> </code><code>$upload</code> <code>= </code><code>new</code> <code>\Think\Upload();</code>

<code> </code><code>$upload</code><code>->exts = </code><code>array</code><code>(</code><code>'jpg'</code><code>, </code><code>'gif'</code><code>, </code><code>'png'</code><code>, </code><code>'jpeg'</code><code>);</code>

<code> </code><code>$upload</code><code>->rootPath = </code><code>'./Uploads/'</code><code>;</code>

<code> </code><code>$upload</code><code>->savePath = </code><code>'/image/commodity/'</code><code>;</code>

<code> </code><code>if</code> <code>(!</code><code>is_dir</code><code>(</code><code>$upload</code><code>->savePath)) {</code>

<code> </code><code>mkdir</code><code>(</code><code>$upload</code><code>->savePath,0777,TRUE);</code>

<code> </code><code>$info</code> <code>= </code><code>$upload</code><code>->upload();</code>

<code> </code><code>echo</code> <code>json_encode(</code><code>$upload</code><code>->getError());</code>

<code> </code><code>$info</code><code>[</code><code>'Filedata'</code><code>][</code><code>'savepath'</code><code>] = </code><code>str_replace</code><code>(</code><code>'image'</code><code>, </code><code>'Uploads/image'</code><code>, </code><code>$info</code><code>[</code><code>'Filedata'</code><code>][</code><code>'savepath'</code><code>]);</code>

<code> </code><code>$path</code> <code>= </code><code>$info</code><code>[</code><code>'Filedata'</code><code>][</code><code>'savepath'</code><code>] . </code><code>$info</code><code>[</code><code>'Filedata'</code><code>][</code><code>'savename'</code><code>];</code>

<code> </code><code>$image</code> <code>= </code><code>new</code> <code>\Think\Image();</code>

<code> </code><code>$image</code><code>->open(</code><code>'.'</code><code>.</code><code>$path</code><code>);</code>

<code> </code><code>$thumbpath</code> <code>= </code><code>'.'</code><code>.</code><code>$info</code><code>[</code><code>'Filedata'</code><code>][</code><code>'savepath'</code><code>] . </code><code>$info</code><code>[</code><code>'Filedata'</code><code>][</code><code>'savename'</code><code>];</code>

<code> </code><code>//$image->thumb(148, 84)->save($thumbpath);</code>

<code> </code><code>$path</code> <code>= ltrim(</code><code>$path</code><code>,</code><code>'.'</code><code>);</code>

<code> </code><code>$thumbpath</code> <code>= ltrim(</code><code>$thumbpath</code><code>,</code><code>'.'</code><code>);</code>

<code> </code><code>$data</code> <code>= </code><code>array</code><code>(</code>

<code> </code><code>'imgpath'</code> <code>=></code><code>$path</code><code>,</code>

<code> </code><code>'thumbpath'</code> <code>=> </code><code>$thumbpath</code>

<code> </code><code>echo</code> <code>json_encode(</code><code>$data</code><code>);</code>

注意 : 上傳圖檔時session丢失, 隻需要修改thinkphp/conf/convention.php中，将VAR_SESSION_ID前面的注釋去掉，然後在用戶端這樣配置下：

即可.

參考連結: http://m.blog.csdn.net/qq_29845761/article/details/49803427

本文轉自噼裡啪啦啦 51CTO部落格，原文連結：http://blog.51cto.com/pilipala/1831613，如需轉載請自行聯系原作者

Uploadify多上傳圖檔插件

繼續閱讀

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

版本号隐藏

Apache配置SSLApache配置SSL

配置apache支援PHP（win7）

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

Cloud Studio初體驗

NOSQL安全攻擊

JS生成uuid的四種方法

php 去掉字元串的最後一個字元及截取原字元串1,2,3,4,5,6,

php——水印

layui多任務上傳添加進度條