.net MVC+Bootstrap下使用localResizeIMG上傳圖片
本文實(shí)例為大家分享了使用localResizeIMG上傳圖片的具體代碼,供大家參考,具體內(nèi)容如下
需要加載的頭文件
html:
<div class="form-group"> <label class="col-sm-6 control-label" for="inputfile">維修照片上傳</label> <div class="col-sm-6 "> <div style="background:url(../../fonts/add.png) no-repeat;width:151px;height:150px;float:left;" id="div1"> <input type="file" accept="image/*" id="file" class="selectinput" style="width:151px;height:150px;opacity:.01"> </div> </div> </div>
accept=“image/*” 這里有些手機(jī)可以拍照 有些不行 沒(méi)有具體測(cè)試統(tǒng)計(jì)
$("#file").localResizeIMG({ width: 400, //height: 200, quality: 1, success: function (result) { var img = new Image(); img.src = result.base64; //$("body").append(img); $("#odd").append(img); //呈現(xiàn)圖像(拍照結(jié)果) $.ajax({ url: "/Home/UploadImg", type: "POST", data: { "formFile": result.clearBase64, "RepairNum": $('#RepairNum').val()}, dataType: "HTML", timeout: 1000, error: function () { alert("ajax Error"); }, success: function (data) { //alert("Uploads success~") } }); } });
界面樣式
后臺(tái)action Base64StringToImage 需要把壓縮后的Base64轉(zhuǎn)換
[HttpPost] public ActionResult UploadImg() { var file = Request["formFile"]; var id = Request["RepairNum"]; string fileName = "1.jpeg"; string filePath = Server.MapPath("~/Upload/" + fileName); try { Base64StringToImage(file, filePath); //upImg.SaveAs(filePhysicalPath); //Session["ImgPath"] = path; //Base64StringToImage(file,); return Content("上傳成功"); } catch { return Content("上傳異常 !"); } } protected void Base64StringToImage(string strbase64, string filepath) { try { byte[] arr = Convert.FromBase64String(strbase64); MemoryStream ms = new MemoryStream(arr); System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(ms); //bmp.Dispose(); bmp.Save(filepath, System.Drawing.Imaging.ImageFormat.Jpeg); ms.Close(); } catch (Exception ex) { } }
參考和下載GitHub:https://github.com/lyg945/localResizeIMG/tree/master/
參考文章:
localResizeIMG先壓縮后使用ajax無(wú)刷新上傳(移動(dòng)端)
移動(dòng)端使用localResizeIMG4壓縮圖片
基于javascript html5實(shí)現(xiàn)多文件上傳
spring mvc+localResizeIMG實(shí)現(xiàn)HTML5端圖片壓縮上傳
HTML5+Canvas調(diào)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳(上)
HTML5實(shí)現(xiàn)微信拍攝上傳照片功能 遇到問(wèn)題的解決方法
推薦三款不錯(cuò)的圖片壓縮上傳插件(webuploader、localResizeIMG4、LUploader)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
html a標(biāo)簽-超鏈接中confirm方法使用介紹
confirm可以彈出確定取消對(duì)話框,然后根據(jù)用戶的選擇執(zhí)行相應(yīng)的操作,接下來(lái)介紹實(shí)現(xiàn)過(guò)程,需要了解的朋友可以參考下2013-01-01js統(tǒng)計(jì)頁(yè)面的來(lái)訪次數(shù)實(shí)現(xiàn)代碼
這篇文章主要介紹了如何使用js統(tǒng)計(jì)頁(yè)面的來(lái)訪次數(shù),需要的朋友可以參考下2014-05-05JSON.stringify(遞歸)與?JSON.parse(有限狀態(tài)自動(dòng)機(jī))的實(shí)現(xiàn)代碼
這篇文章主要介紹了JSON.stringify(遞歸)與?JSON.parse(有限狀態(tài)自動(dòng)機(jī))的實(shí)現(xiàn),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08JS實(shí)現(xiàn)從表格中動(dòng)態(tài)刪除指定行的方法
這篇文章主要介紹了JS實(shí)現(xiàn)從表格中動(dòng)態(tài)刪除指定行的方法,通過(guò)getElementById獲取指定行再使用deleteRow方法來(lái)實(shí)現(xiàn)刪除行的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03JavaScript與C# Windows應(yīng)用程序交互方法
JavaScript與C# Windows應(yīng)用程序交互方法...2007-06-06javascript動(dòng)畫(huà)系列之模擬滾動(dòng)條
本文主要介紹了js動(dòng)畫(huà)模擬滾動(dòng)條的實(shí)現(xiàn)原理以及分享了通過(guò)滾動(dòng)條實(shí)現(xiàn)的幾個(gè)應(yīng)用的實(shí)例代碼:1.通過(guò)移動(dòng)滾動(dòng)條來(lái)實(shí)現(xiàn)數(shù)字的加減;2.通過(guò)拖動(dòng)滾動(dòng)條來(lái)實(shí)現(xiàn)元素尺寸的變化,以改變?cè)貙挾葹槔?3.通過(guò)拖動(dòng)滾動(dòng)條來(lái)實(shí)現(xiàn)內(nèi)容滾。需要的朋友一起來(lái)看下吧2016-12-12JavaScript實(shí)現(xiàn)三級(jí)級(jí)聯(lián)特效
這篇文章主要介紹了JavaScript實(shí)現(xiàn)三級(jí)級(jí)聯(lián)特效,選擇省會(huì)出現(xiàn)相應(yīng)的縣下拉框,同時(shí)市的下拉框改變,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11JavaScript markdown 編輯器實(shí)現(xiàn)雙屏同步滾動(dòng)
這篇文章主要介紹了JavaScript markdown 編輯器實(shí)現(xiàn)雙屏同步滾動(dòng),文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08