C#+ajaxupload实现图片上传

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server"><title>测试demo</title><scriptsrc="jqueryeasyUI/jquery.min.js"type="text/javascript"></script><styletype="text/css">#txtFileName{width:300px;}.btnsubmit{border-bottom:#cc4f00 1px solid;border-left:#ff9000 1px solid;border-top:#ff9000 1px solid;border-right:#cc4f00 1px solid;text-align:center;padding:2px 10px;line-height:16px;background:#e36b0f;height:24px;color:#fff;font-size:12px;cursor:pointer;}</style><scripttype="text/javascript">$(function() {varbutton=$('#btnUp'), interval;varajaxUpload= newAjaxUpload(button, {//action: 'upload-test.php',文件上传服务器端执行的地址
action:'AjaxuploadHandler.ashx',name:'myfile',onSubmit:function(file, ext) {if(!(ext&& /^(jpg|jpeg|JPG|JPEG)$/.test(ext))) {alert('图片格式不正确,请选择 jpg 格式的文件!','系统提示');return false;}//change button text, when user selects file
button.text('上传中');//If you want to allow uploading only 1 file at time,//you can disable upload buttonthis.disable();//Uploding -> Uploading. -> Uploading...
interval=window.setInterval(function() {vartext=button.text();if(text.length< 10) {button.text(text+ '|');}else{button.text('上传中');}},200);return true;},onComplete:function(file, response) {//file 本地文件名称，response 服务器端传回的信息
button.text('上传图片(只允许上传JPG格式的图片,大小不得大于150K)');window.clearInterval(interval);//enable upload buttonthis.enable();vark=response.replace("<pre>","").replace("</pre>","");if(k=== '-1') {alert('您上传的文件太大啦!请不要超过150K');}else{//alert("服务器端传回的串：" + k);//alert("本地文件名称：" + file);
k=k.substring(k.lastIndexOf('>')+1, k.length);$("#txtFileName").val(k);$("<img  width='50' height='50' />").appendTo($('#imglist')).attr("src", k);}}});});</script>
</head>
<body><formid="form1"runat="server"><div><inputtype="text"id="txtFileName"style="width: 300px;" /><divid="btnUp"style="width: 250px;"class="btnsubmit">浏览</div><divid="imglist"></div></div></form>
</body>
<scriptsrc="js/ajaxupload.3.91.js"type="text/javascript"></script>
</html>

View Code

ashx代码

<%@ WebHandler Language="C#" Class="ajaxuploadhandler" %>usingSystem;usingSystem.Drawing;usingSystem.IO;usingSystem.Web;public classajaxuploadhandler : IHttpHandler
{public voidProcessRequest(HttpContext context){context.Response.ContentType= "text/plain";var postedFile = context.Request.Files[0];const string savePath = "images/Bag";var filelength =postedFile.ContentLength;var fileSize = 163600; //150Kvar fileName = "-1"; //返回的上传后的文件名if (filelength <=fileSize){byte[] buffer = new byte[filelength];postedFile.InputStream.Read(buffer,0, filelength);fileName= UploadImage(buffer, savePath, "jpg");}context.Response.Write(fileName);}public static string UploadImage(byte[] imgBuffer, string uploadpath, stringext){try{var m = newMemoryStream(imgBuffer);if (!Directory.Exists(HttpContext.Current.Server.MapPath(uploadpath)))Directory.CreateDirectory(HttpContext.Current.Server.MapPath(uploadpath));var imgname = CreateIdCode() + "." +ext;var path = HttpContext.Current.Server.MapPath(uploadpath) +imgname;var img =Image.FromStream(m);img.Save(path,ext== "jpg" ?System.Drawing.Imaging.ImageFormat.Jpeg : System.Drawing.Imaging.ImageFormat.Gif);m.Close();return uploadpath +imgname;}catch(Exception ex){returnex.Message;}}public static stringCreateIdCode(){var time1 =DateTime.Now.ToUniversalTime();var time2 = Convert.ToDateTime("1970-01-01");var span = time1 - time2;   //span就是两个日期之间的差额var t = span.TotalMilliseconds.ToString("0");returnt;}public boolIsReusable{get{return false;}}}

View Code

ajaxupload.3.91.js代码

引用其中有修改为兼容谷歌具体看代码

/*** AJAX Upload ( http://valums.com/ajax-upload/ ) * Copyright (c) Andris Valums* Licensed under the MIT license ( http://valums.com/mit-license/ )* Thanks to Gary Haran, David Mark, Corey Burns and others for contributions*/(function() {/*global window*//*jslint browser: true, devel: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true*//*** Wrapper for FireBug's console.log*/functionlog(){if (typeof(console) != 'undefined' && typeof(console.log) == 'function'){            Array.prototype.unshift.call(arguments,'[Ajax Upload]');console.log( Array.prototype.join.call(arguments,' '));}}/*** Attaches event to a dom element.* @param {Element} el* @param type event name* @param fn callback This refers to the passed element*/functionaddEvent(el, type, fn){if(el.addEventListener) {el.addEventListener(type, fn,false);}else if(el.attachEvent) {el.attachEvent('on' + type, function(){fn.call(el);});}else{throw new Error('not supported or DOM not loaded');}}/*** Attaches resize event to a window, limiting* number of event fired. Fires only when encounteres* delay of 100 after series of events.* * Some browsers fire event multiple times when resizing* http://www.quirksmode.org/dom/events/resize.html* * @param fn callback This refers to the passed element*/functionaddResizeEvent(fn){vartimeout;addEvent(window,'resize', function(){if(timeout){clearTimeout(timeout);}timeout= setTimeout(fn, 100);                        });}//Needs more testing, will be rewriten for next version//getOffset function copied from jQuery lib (http://jquery.com/)if(document.documentElement.getBoundingClientRect){//Get Offset using getBoundingClientRect//http://ejohn.org/blog/getboundingclientrect-is-awesome/var getOffset = function(el){var box =el.getBoundingClientRect();var doc =el.ownerDocument;var body =doc.body;var docElem = doc.documentElement; //for ievar clientTop = docElem.clientTop || body.clientTop || 0;var clientLeft = docElem.clientLeft || body.clientLeft || 0;//In Internet Explorer 7 getBoundingClientRect property is treated as physical,//while others are logical. Make all logical, like in IE8.var zoom = 1;if(body.getBoundingClientRect) {var bound =body.getBoundingClientRect();zoom= (bound.right - bound.left) /body.clientWidth;}if (zoom > 1) {clientTop= 0;clientLeft= 0;}var top = box.top / zoom + (window.pageYOffset || docElem && docElem.scrollTop / zoom || body.scrollTop / zoom) - clientTop, left = box.left / zoom + (window.pageXOffset || docElem && docElem.scrollLeft / zoom || body.scrollLeft / zoom) -clientLeft;return{top: top,left: left};};        }else{//Get offset adding all offsetsvar getOffset = function(el){var top = 0, left = 0;do{top+= el.offsetTop || 0;left+= el.offsetLeft || 0;el=el.offsetParent;}while(el);return{left: left,top: top};};}/*** Returns left, top, right and bottom properties describing the border-box,* in pixels, with the top-left relative to the body* @param {Element} el* @return {Object} Contains left, top, right,bottom*/functiongetBox(el){varleft, right, top, bottom;var offset =getOffset(el);left=offset.left;top=offset.top;right= left +el.offsetWidth;bottom= top +el.offsetHeight;return{left: left,right: right,top: top,bottom: bottom};}/*** Helper that takes object literal* and add all properties to element.style* @param {Element} el* @param {Object} styles*/functionaddStyles(el, styles){for (var name instyles) {if(styles.hasOwnProperty(name)) {el.style[name]=styles[name];}}}/*** Function places an absolutely positioned* element on top of the specified element* copying position and dimentions.* @param {Element} from* @param {Element} to*/    functioncopyLayout(from, to){var box =getBox(from);addStyles(to, {position:'absolute',                    left : box.left+ 'px',top : box.top+ 'px',width : from.offsetWidth+ 'px',height : from.offsetHeight+ 'px'});        }/*** Creates and returns element from html chunk* Uses innerHTML to create an element*/var toElement = (function(){var div = document.createElement('div');return function(html){div.innerHTML=html;var el =div.firstChild;returndiv.removeChild(el);};})();/*** Function generates unique id* @return unique id*/var getUID = (function(){var id = 0;return function(){return 'ValumsAjaxUpload' + id++;};})();/*** Get file name from path* @param {String} file path to file* @return filename*/  functionfileFromPath(file){return file.replace(/.*(\/|\\)/, "");}/*** Get file extension lowercase* @param {String} file name* @return file extenstion*/    functiongetExt(file){return (-1 !== file.indexOf('.')) ? file.replace(/.*[.]/, '') : '';}functionhasClass(el, name){var re = new RegExp('\\b' + name + '\\b');returnre.test(el.className);}functionaddClass(el, name){if ( !hasClass(el, name)){   el.className+= ' ' +name;}}functionremoveClass(el, name){var re = new RegExp('\\b' + name + '\\b');                el.className= el.className.replace(re, '');        }functionremoveNode(el){el.parentNode.removeChild(el);}/*** Easy styling and uploading* @constructor* @param button An element you want convert to * upload button. Tested dimentions up to 500x500px* @param {Object} options See defaults below.*/window.AjaxUpload= function(button, options){this._settings ={//Location of the server-side upload scriptaction: 'upload.php',//File upload namename: 'userfile',//Additional data to send
data: {},//Submit file as soon as it's selectedautoSubmit: true,//The type of data that you're expecting back from the server.//html and xml are detected automatically.//Only useful when you are using json data as a response.//Set to "json" in that case.responseType: false,//Class applied to button when mouse is hoveredhoverClass: 'hover',//Class applied to button when AU is disableddisabledClass: 'disabled',//When user selects a file, useful with autoSubmit disabled//You can return false to cancel uploadonChange: function(file, extension){},//Callback to fire before file is uploaded//You can return false to cancel uploadonSubmit: function(file, extension){},//Fired when file upload is completed//WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!onComplete: function(file, response){}};//Merge the users options with our defaultsfor (var i inoptions) {if(options.hasOwnProperty(i)){this._settings[i] =options[i];}}//button isn't necessary a dom elementif(button.jquery){//jQuery object was passedbutton = button[0];}else if (typeof button == "string") {if (/^#.*/.test(button)){//If jQuery user passes #elementId don't break itbutton = button.slice(1);                }button=document.getElementById(button);}if ( ! button || button.nodeType !== 1){throw new Error("Please make sure that you're passing a valid element"); }if ( button.nodeName.toUpperCase() == 'A'){//disable linkaddEvent(button, 'click', function(e){if (e &&e.preventDefault){e.preventDefault();}else if(window.event){window.event.returnValue= false;}});}//DOM elementthis._button =button;//DOM elementthis._input = null;//If disabled clicking on button won't do anythingthis._disabled = false;//if the button was disabled before refresh if will remain//disabled in FireFox, let's fix itthis.enable();this._rerouteClicks();};//assigning methods to our classAjaxUpload.prototype ={setData:function(data){this._settings.data =data;},disable:function(){            addClass(this._button, this._settings.disabledClass);this._disabled = true;var nodeName = this._button.nodeName.toUpperCase();if (nodeName == 'INPUT' || nodeName == 'BUTTON'){this._button.setAttribute('disabled', 'disabled');}//hide inputif (this._input){//We use visibility instead of display to fix problem with Safari 4//The problem is that the value of input doesn't change if it//has display none when user selects a file//this._input.parentNode.style.visibility = 'hidden';
}},enable:function(){removeClass(this._button, this._settings.disabledClass);this._button.removeAttribute('disabled');this._disabled = false;},/*** Creates invisible file input * that will hover above the button* <div><input type='file' /></div>*/_createInput:function(){var self = this;var input = document.createElement("input");input.setAttribute('type', 'file');input.setAttribute('name', this._settings.name);addStyles(input, {'position' : 'absolute',//in Opera only 'browse' button//is clickable and it is located at//the right side of the input'right' : 0,'margin' : 0,'padding' : 0,'fontSize' : '480px','cursor' : 'pointer'});var div = document.createElement("div");                        addStyles(div, {'display' : 'block','position' : 'absolute','overflow' : 'hidden','margin' : 0,'padding' : 0,'opacity' : 0,//Make sure browse button is in the right side//in Internet Explorer'direction' : 'ltr',//Max zIndex supported by Opera 9.0-9.2'zIndex': 2147483583});//Make sure that element opacity exists.//Otherwise use IE filterif ( div.style.opacity !== "0") {if (typeof(div.filters) == 'undefined'){throw new Error('Opacity not supported by the browser');}div.style.filter= "alpha(opacity=0)";}            addEvent(input,'change', function(){if ( ! input || input.value === ''){return;                }//Get filename from input, required//as some browsers have path instead of itvar file =fileFromPath(input.value);if (false ===self._settings.onChange.call(self, file, getExt(file))){self._clearInput();return;}//Submit form when value is changedif(self._settings.autoSubmit) {self.submit();}});            addEvent(input,'mouseover', function(){addClass(self._button, self._settings.hoverClass);});addEvent(input,'mouseout', function(){removeClass(self._button, self._settings.hoverClass);//We use visibility instead of display to fix problem with Safari 4//The problem is that the value of input doesn't change if it//has display none when user selects a file//input.parentNode.style.visibility = 'hidden'; //谷歌提示错误所以注释后错误消失
});   div.appendChild(input);document.body.appendChild(div);this._input =input;},_clearInput :function(){if (!this._input){return;}//this._input.value = ''; Doesn't work in IE6removeNode(this._input.parentNode);this._input = null;this._createInput();removeClass(this._button, this._settings.hoverClass);},/*** Function makes sure that when user clicks upload button,* the this._input is clicked instead*/_rerouteClicks:function(){var self = this;//IE will later display 'access denied' error//if you use using self._input.click()//other browsers just ignore click()
addEvent(self._button,'mouseover', function(){if(self._disabled){return;}if ( !self._input){self._createInput();}var div =self._input.parentNode;                            copyLayout(self._button, div);div.style.visibility= 'visible';});//commented because we now hide input on mouseleave/*** When the window is resized the elements * can be misaligned if button position depends* on window size*///addResizeEvent(function(){//if (self._input){//copyLayout(self._button, self._input.parentNode);//}//});
},/*** Creates iframe with unique name* @return {Element} iframe*/_createIframe:function(){//We can't use getTime, because it sometimes return//same value in safari :(var id =getUID();//We can't use following code as the name attribute//won't be properly registered in IE6, and new window//on form submit will open//var iframe = document.createElement('iframe');//iframe.setAttribute('name', id);var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');//src="javascript:false; was added//because it possibly removes ie6 prompt//"This page contains both secure and nonsecure items"//Anyway, it doesn't do any harm.iframe.setAttribute('id', id);iframe.style.display= 'none';document.body.appendChild(iframe);returniframe;},/*** Creates form, that will be submitted to iframe* @param {Element} iframe Where to submit* @return {Element} form*/_createForm:function(iframe){var settings = this._settings;//We can't use the following code in IE6//var form = document.createElement('form');//form.setAttribute('method', 'post');//form.setAttribute('enctype', 'multipart/form-data');//Because in this case file won't be attached to requestvar form = toElement('<form method="post" enctype="multipart/form-data"></form>');form.setAttribute('action', settings.action);form.setAttribute('target', iframe.name);                                   form.style.display= 'none';document.body.appendChild(form);//Create hidden input element for each data keyfor (var prop insettings.data) {if(settings.data.hasOwnProperty(prop)){var el = document.createElement("input");el.setAttribute('type', 'hidden');el.setAttribute('name', prop);el.setAttribute('value', settings.data[prop]);form.appendChild(el);}}returnform;},/*** Gets response from iframe and fires onComplete event when ready* @param iframe* @param file Filename to use in onComplete callback*/_getResponse :function(iframe, file){//getting responsevar toDeleteFlag = false, self = this, settings = this._settings;   addEvent(iframe,'load', function(){if (//For Safariiframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" ||//For FF, IEiframe.src == "javascript:'<html></html>';"){//First time around, do not delete.//We reload to blank page, so that reloading main page//does not re-submit the post.if(toDeleteFlag) {//Fix busy state in FF3setTimeout(function(){removeNode(iframe);},0);}return;}var doc = iframe.contentDocument ?iframe.contentDocument : window.frames[iframe.id].document;//fixing Opera 9.26,10.00if (doc.readyState && doc.readyState != 'complete') {//Opera fires load event multiple times//Even when the DOM is not ready yet//this fix should not affect other browsersreturn;}//fixing Opera 9.64if (doc.body && doc.body.innerHTML == "false") {//In Opera 9.64 event was fired second time//when body.innerHTML changed from false//to server response approx. after 1 secreturn;}varresponse;if(doc.XMLDocument) {//response is a xml document Internet Explorer propertyresponse =doc.XMLDocument;}else if(doc.body){//response is html document or plain textresponse =doc.body.innerHTML;if (settings.responseType && settings.responseType.toLowerCase() == 'json') {//If the document was sent as 'application/javascript' or//'text/javascript', then the browser wraps the text in a <pre>//tag and performs html encoding on the contents.  In this case,//we need to pull the original text content from the text node's//nodeValue property to retrieve the unmangled content.//Note that IE6 only understands text/htmlif (doc.body.firstChild && doc.body.firstChild.nodeName.toUpperCase() == 'PRE') {response=doc.body.firstChild.firstChild.nodeValue;}if(response) {response= eval("(" + response + ")");}else{response={};}}}else{//response is a xml documentresponse =doc;}settings.onComplete.call(self, file, response);//Reload blank page, so that reloading main page//does not re-submit the post. Also, remember to//delete the frametoDeleteFlag = true;//Fix IE mixed content issueiframe.src = "javascript:'<html></html>';";});            },/*** Upload file contained in this._input*/submit:function(){var self = this, settings = this._settings;if ( ! this._input || this._input.value === ''){return;                }var file = fileFromPath(this._input.value);//user returned false to cancel uploadif (false === settings.onSubmit.call(this, file, getExt(file))){this._clearInput();return;}//sending requestvar iframe = this._createIframe();var form = this._createForm(iframe);//assuming following structure//div -> input type='file'removeNode(this._input.parentNode);            removeClass(self._button, self._settings.hoverClass);form.appendChild(this._input);form.submit();//request set, clean upremoveNode(form); form = null;                          removeNode(this._input); this._input = null;//Get response from iframe and fire onComplete event when readythis._getResponse(iframe, file);//get ready for next requestthis._createInput();}};
})();

View Code

转载于:https://www.cnblogs.com/professional-NET/p/4951662.html

C#+ajaxupload实现图片上传相关推荐

js java 图片上传_spring(java,js,html) 截图上传图片实例详解
html 最后上传了这个插件共学习参考 function addFile(obj){ //document.getElementById('img').src = path; $.ajaxFile ...
菜鸟的springboot项目图片上传及图片路径分析
菜鸟的springboot项目图片上传及图片路径分析说明一.图片路径分析二.实现图片上传 (1)单文件上传(非异步) (2)单文件上传(异步) 三.总结四.更新配置文件说明更新时间:202 ...
AjaxUpLoad.js文件上传插件的使用
一.页面中的配置 <aebiz:file property="bigPicData" fileType="<%=FileConst.FILE_TYPE_PIC ...
图片上传时，QQ浏览器会弹出下载弹框的解决方案
在做这次的欢乐购车季项目中,出现了一个以前没有遇到的问题,就是点击上传按钮,QQ浏览器会弹出下载框,非常讨厌.从网上查了很多资料,虽然大家对QQ浏览器带给前端的麻烦是深恶痛绝,但是没办法,还得想办法解 ...
图片上传IE11上传成功但图片无法显示问题的解决方案
同样是图片上传的问题.我用的是<input type="file" name="upload"> 问题描述: IE8/9/10都没有问题,上传到服务 ...
jsp/html页面图片上传并展示上传的图片
之前做过一个项目,有一个功能是图片上传并且展示图片,尝试过其他的方法,但会有一个问题,那就是在IE8上图片并不能正常展示,所以便用以下方法来上传图片,很好的解决了此问题,步骤如下: 1.上传图片页面i ...
html显示数据库图片django,django将图片上传数据库后在前端显式的方法
1.使用ImageField先安装pillow模块 pip install pillow 2.在app的models中设置 class Image(models.Model): pic_name=mo ...
yii2框架原生的结合框架使用的图片上传
首先我们要从model层开始写起,主要是为了创建验证规则,还有图片上传的路径以及图片的命名规则(UploadForm.php) 接下来我们要在控制器层写好业务逻辑,就是什么情况下直接在调用model层 ...
java flex 图片上传_flex上传图片到java服务器
今天弄flex上传图片到java,现在弄成功,中间也经常一点小波折,现记录一下.重点在java侧的实现. flex侧:文件上载到在url参数中传递的URL.该URL必须是配置为接受上载的服务器脚本.F ...
js表单提交，支持图片上传，包含后端php代码
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. <html><head><meta http-equiv="Conte ...

C#+ajaxupload实现图片上传

C#+ajaxupload实现图片上传相关推荐

最新文章

热门文章