這篇文章給大家分享的是有關(guān)jquery.uploadView如何實(shí)現(xiàn)圖片預(yù)覽上傳功能的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)建站主要從事做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)麗江,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575
代碼如下:
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script src="~/Scripts/jquery.uploadView.js"></script> </head> <body> <div> <div class="shangchuan"> <h5>示例</h5> <div class="js_uploadBox" > <div id="preview" class="js_showBox"> <img id="imghead" border="0" src="http://static.neihanhongbao.com/highads/images/nologo.jpg" alt="上傳圖片" /> </div> <input type="file" name="file" id="id" onclick="Upload()"> </div> <input type="hidden" id="hidTmp_ID" name="Tmp_ID" value="" /> </div> </div> </body> </html> <script type="text/javascript"> function Upload() { $("#id").uploadView({ uploadBox: '.js_uploadBox',//設(shè)置上傳框容器 showBox: '.js_showBox',//設(shè)置顯示預(yù)覽圖片的容器 width: '100', //預(yù)覽圖片的寬度,單位px height: '100', //預(yù)覽圖片的高度,單位px allowType: ["gif", "jpeg", "jpg", "bmp", "png"], //允許上傳圖片的類型 maxSize:1, //允許上傳圖片的最大尺寸,單位M success: function (e) { var l = $(".js_showBox img").attr("src"); $("#hidTmp_ID").val(l); } }); } </script>
代碼前臺看起來很簡單。
實(shí)現(xiàn)的效果也還可以,不過這個保存的是base64的圖片,插入數(shù)據(jù)庫的時候我們一般都是保存xxxx.jpg 故需要實(shí)現(xiàn)一個方法
/// <summary> /// base64轉(zhuǎn)圖片 /// </summary> /// <returns></returns> public static string BaseToImg(string baseimg) { byte[] bt = Convert.FromBase64String(baseimg.Replace("data:image/jpeg;base64,", "")); string filepath = "ImgServer".GetAppsetting(); string sqlurl = @"" + DateTime.Now.ToString("yyyyMMdd") + "\\"; string sqlname = "" + DateTime.Now.ToString("yyyyMMddhhmmssmsfff") + ".jpg"; if (!System.IO.File.Exists(filepath + sqlurl)) { System.IO.Directory.CreateDirectory(filepath + sqlurl); System.IO.File.WriteAllBytes(filepath + sqlurl + sqlname, bt); } return sqlurl + sqlname; }
這里我是根據(jù)日期對文件夾分組了,并且保存到數(shù)據(jù)庫。避免單個文件太大
效果圖類似這樣
這個同樣也適用于手機(jī)上
感謝各位的閱讀!關(guān)于“jquery.uploadView如何實(shí)現(xiàn)圖片預(yù)覽上傳功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
網(wǎng)站標(biāo)題:jquery.uploadView如何實(shí)現(xiàn)圖片預(yù)覽上傳功能
文章出自:http://muchs.cn/article36/pidesg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)建站、品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、云服務(wù)器、品牌網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)