jQuery 自制上傳頭像插件-附帶Demo執行個體（ajaxfileupload.js第三彈）

這篇文章主要是對前兩篇關于ajaxfileupload.js插件的文章

的一個收關。但是最初也是因為想做這麼一個功能，一點一點的引發出了好多問題，不斷去學習，研究，才寫了這三篇。

早些時候已經實作了上傳頭像的功能，但是代碼卻是零零散散的，有html，有jQuery還有c#，是以就決定把這個功能獨立出來，當個插件用會友善很多。而事實是在封裝成插件的過程中，也學到了很多知識。

下面給大家看一下界面：

1、初始情況下

2、點選上傳頭像，彈出選擇，預覽浮動框

3、選擇圖檔

4、确定後，符合要求，會提示成功，不符合要求，也會做出相應的提示

5、預覽

6、确定上傳

下面是部分代碼

js部分：

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

131

132

133

134

135

136

137

138

139

140

141

142

<code>$.fn.extend({</code>

<code> </code><code>ShowTheFloatDiv: </code><code>function</code> <code>(obj) {</code>

<code> </code><code>$(</code><code>this</code><code>).click(</code><code>function</code> <code>() {</code>

<code> </code><code>$(</code><code>"body"</code><code>).find(</code><code>"*"</code><code>).not(</code><code>"div.float-outer"</code><code>).attr(</code><code>"disabled"</code><code>, </code><code>"disabled"</code><code>);</code>

<code> </code><code>var</code> <code>$float = jQuery.CreateTheFloatDiv();</code>

<code> </code><code>$img_outer_obj = obj;</code>

<code>$.extend({</code>

<code> </code><code>CreateTheFloatDiv: </code><code>function</code> <code>() {</code>

<code> </code><code>if</code> <code>($(</code><code>".float-outer"</code><code>).size() == 1) {</code>

<code> </code><code>return</code> <code>$(</code><code>".float-outer"</code><code>);</code>

<code> </code><code>var</code> <code>left_offset = ($(window).width() - 600) / 2;</code><code>//顯示在浏覽器視窗比較正的位置，看着比較舒服</code>

<code> </code><code>var</code> <code>top_offset = ($(window).height() - 278) / 3;</code>

<code> </code><code>var</code> <code>theFloatDivHtml = </code><code>"<div class='float-outer' style='left:"</code> <code>+ left_offset + </code><code>"px;top:"</code> <code>+ top_offset + </code><code>"px;'>"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<div class='float-header float-border'>上傳頭像</div>"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<div class='float-content'>"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<div class='content-first-row'>檔案名:"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<input type='text' id='tb_filename' style=';' readonly /> "</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<input type='button' id='btn_selectfile' value='選擇圖檔' style='margin-left:-10px;' />"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<input type='file' id='btn_upload' name='btn_upload' style='display:none;' accept='.jpg,.bmp,.gif' />"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"</div>"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<div class='content-second-row'>"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<span class='img-portrait' style=';'>圖檔預覽:"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<div class='img-portrait' style='padding-top:30px;'>"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<img src='' class='preview60' alt=''/>"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<span>60*60"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<div style='float:left;'>"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<img src='' class='preview120' alt=''/>"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<span>120*120"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<div class='float-footer float-border'>"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<input type='submit' value='确定' id='btn_ok' />"</code><code>;</code>

<code> </code><code>theFloatDivHtml += </code><code>"<input type='button' value='取消' id='btn_cancel' />"</code><code>;</code>

<code> </code><code>$(</code><code>"body"</code><code>).append(theFloatDivHtml);</code><code>return</code> <code>$(</code><code>".float-outer"</code><code>);</code>

<code>var</code> <code>$img_outer_obj;</code>

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

<code> </code><code>$(</code><code>"body"</code><code>).delegate(</code><code>"#btn_cancel"</code><code>, </code><code>"click"</code><code>, </code><code>function</code> <code>() {</code>

<code> </code><code>$(</code><code>".float-outer"</code><code>).remove();</code>

<code> </code><code>$(</code><code>"body"</code><code>).find(</code><code>"*"</code><code>).removeAttr(</code><code>"disabled"</code><code>);</code>

<code> </code><code>//選擇圖檔事件</code>

<code> </code><code>$(</code><code>"body"</code><code>).delegate(</code><code>"#btn_selectfile"</code><code>, </code><code>"click"</code><code>, </code><code>function</code> <code>() {</code>

<code> </code><code>$(</code><code>"#btn_upload"</code><code>).trigger(e);</code>

<code> </code><code>var</code> <code>e = jQuery.Event(</code><code>"click"</code><code>);</code>

<code> </code><code>$(</code><code>"body"</code><code>).delegate(</code><code>"#btn_upload"</code><code>, </code><code>"click"</code><code>, </code><code>function</code> <code>() {</code>

<code> </code><code>}).delegate(</code><code>"#btn_upload"</code><code>, </code><code>"change"</code><code>, </code><code>function</code> <code>() {</code>

<code> </code><code>var</code> <code>curPATH = getFilePath($(</code><code>this</code><code>).get(0));</code>

<code> </code><code>var</code> <code>fileName = curPATH.substring(curPATH.lastIndexOf(</code><code>"\\"</code><code>) + 1);</code>

<code> </code><code>var</code> <code>type = curPATH.substring(curPATH.lastIndexOf(</code><code>'.'</code><code>) + 1).toLowerCase();</code>

<code> </code><code>$(</code><code>"input#tb_filename"</code><code>).val(fileName);</code>

<code> </code><code>if</code> <code>($(</code><code>"input#tb_filename"</code><code>).val() == </code><code>""</code><code>) {</code>

<code> </code><code>alert(</code><code>"請先上傳檔案！"</code><code>);</code>

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

<code> </code><code>$.ajaxFileUpload</code>

<code> </code><code>url: </code><code>'/UploadPortrait.aspx'</code><code>, </code><code>//用于檔案上傳的伺服器端請求位址，需要根據實際情況進行修改</code>

<code> </code><code>secureuri: </code><code>false</code><code>, </code><code>//一般設定為false</code>

<code> </code><code>fileElementId: $(</code><code>"input#btn_upload"</code><code>).attr(</code><code>"id"</code><code>), </code><code>//檔案上傳空間的id屬性 <input type="file" id="file" name="file" /> //$("form").serialize(),表單序列化。指吧所有元素的ID，NAME 等全部發過去</code>

<code> </code><code>dataType: </code><code>'json'</code><code>, </code><code>//傳回值類型一般設定為json</code>

<code> </code><code>complete: </code><code>function</code> <code>() {</code><code>//隻要完成即執行，最後執行</code>

<code> </code><code>success: </code><code>function</code> <code>(data, status) </code><code>//伺服器成功響應處理函數</code>

<code> </code><code>if</code> <code>(</code><code>typeof</code> <code>(data.error) != </code><code>'undefined'</code><code>) {</code>

<code> </code><code>if</code> <code>(data.error != </code><code>''</code><code>) {</code>

<code> </code><code>if</code> <code>(data.error == </code><code>"1001"</code><code>) {</code>

<code> </code><code>else</code> <code>if</code> <code>(data.error == </code><code>"1002"</code><code>) {</code>

<code> </code><code>$(</code><code>"input#tb_filename"</code><code>).val(</code><code>""</code><code>);</code>

<code> </code><code>$(</code><code>".preview60"</code><code>).attr(</code><code>"src"</code><code>, </code><code>""</code><code>);</code>

<code> </code><code>$(</code><code>".preview120"</code><code>).attr(</code><code>"src"</code><code>, </code><code>""</code><code>);</code>

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

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

<code> </code><code>$(</code><code>".preview60"</code><code>).attr(</code><code>"src"</code><code>, data.imgurl);</code>

<code> </code><code>$(</code><code>".preview120"</code><code>).attr(</code><code>"src"</code><code>, data.imgurl);</code>

<code> </code><code>error: </code><code>function</code> <code>(data, status, e)</code><code>//伺服器響應失敗處理函數</code>

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

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

<code> </code><code>alert(</code><code>"請選擇正确的圖檔格式(.jpg|.gif|.bmp)"</code><code>);</code>

<code> </code><code>$(</code><code>"body"</code><code>).delegate(</code><code>"#btn_ok"</code><code>, </code><code>"click"</code><code>, </code><code>function</code> <code>() {</code>

<code> </code><code>$img_outer_obj.attr(</code><code>"src"</code><code>, $(</code><code>".preview120"</code><code>).attr(</code><code>"src"</code><code>));</code>

<code> </code><code>//移動浮動框</code>

<code> </code><code>var</code> <code>offset_left, offset_top, moveFlag;</code>

<code> </code><code>$(</code><code>"body"</code><code>).delegate(</code><code>".float-header"</code><code>, </code><code>"mousedown"</code><code>, </code><code>function</code> <code>(e) {</code>

<code> </code><code>moveFlag = </code><code>true</code><code>;</code>

<code> </code><code>offset_left = e.pageX - $(</code><code>this</code><code>).offset().left;</code>

<code> </code><code>offset_top = e.pageY - $(</code><code>this</code><code>).offset().top;</code>

<code> </code><code>$(</code><code>"body"</code><code>).delegate(</code><code>".float-header"</code><code>, </code><code>"mousemove"</code><code>, </code><code>function</code> <code>(e) {</code>

<code> </code><code>if</code> <code>(moveFlag) {</code>

<code> </code><code>$(</code><code>".float-outer"</code><code>).css(</code><code>"left"</code><code>, e.pageX - offset_left + </code><code>"px"</code><code>).css(</code><code>"top"</code><code>, e.pageY - offset_top + </code><code>"px"</code><code>);</code>

<code> </code><code>}).delegate(</code><code>".float-header"</code><code>, </code><code>"mouseup"</code><code>, </code><code>function</code> <code>() {</code>

<code> </code><code>moveFlag = </code><code>false</code><code>;</code>

C#部分：

因為上傳檔案用到了ajax，需要先将圖檔上傳到本地，這裡也算是一個比較糾結的事情吧，因為如果想預覽，除非用一些插件，否則使用的方法都得是先上傳，再預覽這樣。這種來者都要不拒的事，看起來比較流氓哈~~

<code> </code><code>HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;</code>

<code> </code><code>string</code> <code>msg = </code><code>string</code><code>.Empty;</code>

<code> </code><code>string</code> <code>error = </code><code>string</code><code>.Empty;</code>

<code> </code><code>string</code> <code>imgurl = </code><code>string</code><code>.Empty;</code>

<code> </code><code>protected</code> <code>void</code> <code>Page_Load(</code><code>object</code> <code>sender, EventArgs e)</code>

<code> </code><code>if</code> <code>(files.Count > 0)</code>

<code> </code><code>if</code> <code>(System.IO.File.Exists(Server.MapPath(</code><code>"/UploadImages/"</code><code>) + files[0].FileName))</code>

<code> </code><code>msg = </code><code>"圖檔已存在"</code><code>;</code>

<code> </code><code>error = </code><code>"1001"</code><code>;</code>

<code> </code><code>string</code> <code>res1 = </code><code>"{ error:'"</code> <code>+ error + </code><code>"', msg:'"</code> <code>+ msg + </code><code>"',imgurl:'"</code> <code>+ imgurl + </code><code>"'}"</code><code>;</code>

<code> </code><code>Response.Write(res1);</code>

<code> </code><code>Response.End();</code><code>return</code><code>;</code>

<code> </code><code>if</code> <code>(files[0].ContentLength > 4 * 1024 * 1024)</code>

<code> </code><code>msg = </code><code>"圖檔大小不能超過4M"</code><code>;</code>

<code> </code><code>error = </code><code>"1002"</code><code>;</code>

<code> </code><code>files[0].SaveAs(Server.MapPath(</code><code>"/UploadImages/"</code><code>) + System.IO.Path.GetFileName(files[0].FileName));</code>

<code> </code><code>catch</code> <code>(System.IO.DirectoryNotFoundException)</code>

<code> </code><code>msg = </code><code>" 上傳成功! 圖檔大小為:"</code> <code>+ files[0].ContentLength + </code><code>"K"</code><code>;</code>

<code> </code><code>imgurl = </code><code>"/UploadImages/"</code> <code>+ files[0].FileName;</code>

<code> </code><code>string</code> <code>res = </code><code>"{ error:'"</code> <code>+ error + </code><code>"', msg:'"</code> <code>+ msg + </code><code>"',imgurl:'"</code> <code>+ imgurl + </code><code>"'}"</code><code>;</code>

<code> </code><code>Response.Write(res);</code>

<code> </code><code>Response.End();</code>

如何調用此插件

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

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

<code> </code><code>$(</code><code>"#btn_portrait"</code><code>).ShowTheFloatDiv($(</code><code>"#img_portrait"</code><code>));</code>

注意事項

必須在“上傳頭像”按鈕所在頁面引入以下幾個檔案

UploadPortrait.css

ajaxfileupload.js

jquery-2.0.3.min.js（jQuery插件要求在1.4.2版本之上）

UploadPortrait.js

如果大家在使用過程中出現問題，可以先把前面相關的兩篇文章略讀一下，大概就能找到原因了。

大緻這個功能就是如上這樣，感興趣的朋友可以從下面的位址下載下傳Demo運作看看。此外想說的是，因為是頭像嘛，一定要存資料庫的，但是在Demo裡我并沒有寫，這個東西就是看大家想怎麼實作了，要是我的話，因為之前預覽都要将圖檔存到本地，是以如果存資料庫的話，當然是會存圖檔的url了，那這樣就比較好辦了。

總的來說，要比想像中的快些完成了這個插件，功能倒是達到了自己的預期，但是界面來說，還有很長的一段路要走。第一次寫jQuery插件，很多東西都不太專業，希望大牛們能多多給予指正和幫助。

關于上傳的Demo補充内容：

上傳的demo有兩個問題需要說明一下，希望下載下傳的朋友能夠注意到，并流暢運作。

1、因為demo是ASP.NET項目，是以大家如想正常運作，需要在本地建立一個web項目，把我上傳的uploadportrait.csproj這個檔案添加進去。下次我會直接打包一個完整的web項目再上傳，這次沒做好希望大家給予諒解。另，我開發的時候Visual Studio版本為2010，這個望大家注意一下。

2、在調用插件的代碼部分，demo裡寫的是

<code> </code><code>$(</code><code>"#btn_portrait"</code><code>).ShowTheFloatDiv($(img_portrait));</code>

應該把$(img_portrait)改成$("#img_portrait")，這個也是自己的失誤，下回會注意。

本文轉自我不會抽煙 51CTO部落格，原文連結：http://blog.51cto.com/zhouhongyu1989/1550401，如需轉載請自行聯系原作者

jQuery 自制上傳頭像插件-附帶Demo執行個體（ajaxfileupload.js第三彈）

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

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

tab滑鼠經過菜單切換

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

vue搭建過程及出現問題

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

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

JS生成uuid的四種方法

layui多任務上傳添加進度條