移动端图片上传方法
移動端圖片上傳方法
實現效果 文件下載 http://files.cnblogs.com/files/sntetwt/移動端圖片上傳.rar
?
實現步驟
一、隱藏<input type="file" id="file" name="Filedata" style="display:none;" accept="image/*" />
二、創建上傳按鈕<div id="upload-box"></div>
三、綁定事件
?$("#upload-box").click(function () {
$("#file").trigger("click");
})
插件代碼jquery.uploadBase64.js
function UploadBase64() {this.sw = 0;this.sh = 0;this.tw = 0;this.th = 0;this.scale = 0;this.maxWidth = 0;this.maxHeight = 0;this.maxSize = 0;this.fileSize = 0;this.fileDate = null;this.fileType = '';this.fileName = '';this.input = null;this.canvas = null;this.mime = {};this.type = '';this.callback = function () { };this.loading = function () { }; }UploadBase64.prototype.init = function (options) {this.maxWidth = options.maxWidth || 800;this.maxHeight = options.maxHeight || 600;this.maxSize = options.maxSize || 3 * 1024 * 1024;this.input = options.input;this.mime = { 'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp' };this.callback = options.callback || function () { };this.loading = options.loading || function () { };this._addEvent(); };/** * @description 綁定事件 * @param {Object} elm 元素 * @param {Function} fn 綁定函數 */ UploadBase64.prototype._addEvent = function () {var _this = this;function tmpSelectFile(ev) {_this._handelSelectFile(ev);}this.input.addEventListener('change', tmpSelectFile, false); };/** * @description 綁定事件 * @param {Object} elm 元素 * @param {Function} fn 綁定函數 */ UploadBase64.prototype._handelSelectFile = function (ev) {var file = ev.target.files[0];this.type = file.type// 如果沒有文件類型，則通過后綴名判斷（解決微信及360瀏覽器無法獲取圖片類型問題） if (!this.type) {this.type = this.mime[file.name.match(/\.([^\.] )$/i)[1]];}if (!/image.(png|jpg|jpeg|bmp)/.test(this.type)) {alert('選擇的文件類型不是圖片');return;}if (file.size > this.maxSize) {alert('選擇文件大于' this.maxSize / 1024 / 1024 'M，請重新選擇');return;}this.fileName = file.name;this.fileSize = file.size;this.fileType = this.type;this.fileDate = file.lastModifiedDate;this._readImage(file); };/** * @description 讀取圖片文件 * @param {Object} image 圖片文件 */ UploadBase64.prototype._readImage = function (file) {var _this = this;function tmpCreateImage(uri) {_this._createImage(uri);}this.loading();this._getURI(file, tmpCreateImage); };/** * @description 通過文件獲得URI * @param {Object} file 文件 * @param {Function} callback 回調函數，返回文件對應URI * return {Bool} 返回false */ UploadBase64.prototype._getURI = function (file, callback) {var reader = new FileReader();var _this = this;function tmpLoad() {// 頭不帶圖片格式，需填寫格式 var re = /^data:base64,/;var ret = this.result '';if (re.test(ret)) ret = ret.replace(re, 'data:' _this.mime[_this.fileType] ';base64,');callback && callback(ret);}reader.onload = tmpLoad;reader.readAsDataURL(file);return false; };/** * @description 創建圖片 * @param {Object} image 圖片文件 */ UploadBase64.prototype._createImage = function (uri) {var img = new Image();var _this = this;function tmpLoad() {_this._drawImage(this);}img.onload = tmpLoad;img.src = uri; };/** * @description 創建Canvas將圖片畫至其中，并獲得壓縮后的文件 * @param {Object} img 圖片文件 * @param {Number} width 圖片最大寬度 * @param {Number} height 圖片最大高度 * @param {Function} callback 回調函數，參數為圖片base64編碼 * return {Object} 返回壓縮后的圖片 */ UploadBase64.prototype._drawImage = function (img, callback) {this.sw = img.width;this.sh = img.height;this.tw = img.width;this.th = img.height;this.scale = (this.tw / this.th).toFixed(2);if (this.sw > this.maxWidth) {this.sw = this.maxWidth;this.sh = Math.round(this.sw / this.scale);}if (this.sh > this.maxHeight) {this.sh = this.maxHeight;this.sw = Math.round(this.sh * this.scale);}this.canvas = document.createElement('canvas');var ctx = this.canvas.getContext('2d');this.canvas.width = this.sw;this.canvas.height = this.sh;ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, this.sw, this.sh);this.callback(this.canvas.toDataURL(this.type));ctx.clearRect(0, 0, this.tw, this.th);this.canvas.width = 0;this.canvas.height = 0;this.canvas = null; };?
?
HTML代碼
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <title>手機端圖片上傳</title> </head> <body> <script type="text/javascript" charset="utf-8" src="/scripts/jquery/jquery-1.11.2.min.js"></script><script src="scripts/jquery/jquery.uploadBase64.js" type="text/javascript"></script><input type="file" accept="image/*" id="file" style="display:none"> <div id="upload-box" style="width:200px;height:45px;line-height:45px;text-align:center;color:#fff; background:#02598e; cursor:pointer;">移動端圖片上傳</div> <script>document.addEventListener('DOMContentLoaded', init, false);function init() {var u = new UploadBase64();u.init({input: document.querySelector('#file'),callback: function (base64) {$.ajax({url: "/upload_ajax.ashx?action=UploadBase64",data: { base64: base64, type: this.fileType },type: 'post',dataType: 'json',success: function (i) {alert(i.info);}})},loading: function () {}});}$(function () {$("#upload-box").click(function () {$("#file").trigger("click");})})</script> </body> </html>?asp.net后臺處理代碼：upload_ajax.ashx
using System; using System.Collections; using System.IO; using System.Collections.Generic; using System.Web.SessionState; using System.Web; using System.Drawing;namespace DianShang.Web.tools {/// <summary>/// 文件上傳處理頁/// </summary>public class upload_ajaxs : IHttpHandler, IRequiresSessionState{public void ProcessRequest(HttpContext context){//取得處事類型string action = context.Request.QueryString["action"];switch (action){case "UpLoadBase64": //Base64編碼上傳UpLoadBase64(context);break;default: //普通上傳UpLoadFile(context);break;}}#region Base64編碼上傳===================================private void UpLoadBase64(HttpContext context){Model.siteconfig siteConfig = new BLL.siteconfig().loadConfig();string _delpath = context.Request.Form["delpath"];string _upfile = context.Request.Form["base64"]; string[] tmpArr = _upfile.Split(',');byte[] base64 = Convert.FromBase64String(tmpArr[1]);MemoryStream ms = new MemoryStream(base64);System.Drawing.Image postedFile = System.Drawing.Image.FromStream(ms);string path = String.Format("/upload/{0}/{0}.jpg", DateTime.Now.ToString("yyyyMMddHHss"));//保存文件postedFile.Save(context.Server.MapPath(path));//處理完畢，返回JOSN格式的文件信息context.Response.Write("{\"status\": 1, \"msg\": \"上傳文件成功！\", \"path\": \"" path "\"}");context.Response.End();}#endregion#region 普通上傳===================================private void UpLoadFile(HttpContext context){}#endregionpublic bool IsReusable{get{return false;}}} }?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
- 上一篇： jQuery数据转换与提交
- 下一篇： jquery ready方法实现原理