上传文件是常要处理的事情,使用ajaxFileUpload.js处理比较方便,这里的ajaxFileUpload.js文件修改过的,
上传文件是常要处理的事情,使用ajaxFileUpload.js处理比较方便,这里的ajaxFileUpload.js文件修改过的,
Html部分
<input type="file" id="fu_UploadFile" name="fu_UploadFile" value="" title="上传附件">
<input type="button" value="上传" onclick="upload()" />
JS部分:
function upload() {
var path = document.getElementById("fu_UploadFile").value;
if ($.trim(path) == "") { alert("请选择要上传的文件"); return; }
console.log("test");</span><span style="color: #0000ff;">var</span> result_msg = ""<span style="color: #000000;">;
$.ajaxFileUpload({
url: </span>'/UpFile.ashx', <span style="color: #008000;">//</span><span style="color: #008000;">这里是服务器处理的代码</span>
type: 'post'<span style="color: #000000;">,
secureuri: </span><span style="color: #0000ff;">false</span>, <span style="color: #008000;">//</span><span style="color: #008000;">一般设置为false</span>
fileElementId: 'fu_UploadFile', <span style="color: #008000;">//</span><span style="color: #008000;"> 上传文件的id、name属性名</span>
dataType: 'json', <span style="color: #008000;">//</span><span style="color: #008000;">返回值类型,一般设置为json、application/json</span>
data: {}, <span style="color: #008000;">//</span><span style="color: #008000;">传递参数到服务器</span>
success: <span style="color: #0000ff;">function</span><span style="color: #000000;"> (data, status) {
</span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (data.Result) {
alert(</span>"文件成功处理完成!" +<span style="color: #000000;"> data.FileName);
} </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
alert(</span>"文件成功处理出错!原因:" +<span style="color: #000000;"> data.ErrorMessage);
}
},
error: </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (data, status, e) {
alert(</span>"错误:上传组件错误,请检察网络!"<span style="color: #000000;">);
}
});
}</span></pre>
服务器:
/// <summary>
/// UpFile 的摘要说明
/// </summary>
public class UpFile : IHttpHandler
{</span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span><span style="color: #000000;"> ProcessRequest(HttpContext context)
{
context.Response.ContentType </span>= <span style="color: #800000;">"</span><span style="color: #800000;">text/plain</span><span style="color: #800000;">"</span><span style="color: #000000;">;
UpFileResult result </span>= <span style="color: #0000ff;">new</span><span style="color: #000000;"> UpFileResult();
</span><span style="color: #0000ff;">try</span><span style="color: #000000;">
{
HttpPostedFile _upfile </span>= context.Request.Files[<span style="color: #800000;">"</span><span style="color: #800000;">fu_UploadFile</span><span style="color: #800000;">"</span><span style="color: #000000;">];
</span><span style="color: #0000ff;">if</span> (_upfile == <span style="color: #0000ff;">null</span><span style="color: #000000;">)
{
</span><span style="color: #0000ff;">throw</span> <span style="color: #0000ff;">new</span> Exception(<span style="color: #800000;">"</span><span style="color: #800000;">请先选择文件!</span><span style="color: #800000;">"</span><span style="color: #000000;">);
}
</span><span style="color: #0000ff;">else</span><span style="color: #000000;">
{
</span><span style="color: #0000ff;">string</span> fileName = _upfile.FileName;<span style="color: #008000;">/*</span><span style="color: #008000;">获取文件名: C:\Documents and Settings\Administrator\桌面\123.jpg</span><span style="color: #008000;">*/</span>
<span style="color: #0000ff;">string</span> suffix = fileName.Substring(fileName.LastIndexOf(<span style="color: #800000;">"</span><span style="color: #800000;">.</span><span style="color: #800000;">"</span>) + <span style="color: #800080;">1</span>).ToLower();<span style="color: #008000;">/*</span><span style="color: #008000;">获取后缀名并转为小写: jpg</span><span style="color: #008000;">*/</span>
<span style="color: #0000ff;">int</span> bytes = _upfile.ContentLength;<span style="color: #008000;">//</span><span style="color: #008000;">获取文件的字节大小
</span><span style="color: #008000;">//
if (!(suffix == "jpg" || suffix == "gif" || suffix == "png"|| suffix == "jpeg"))
throw new Exception("只能上传JPE,GIF,PNG文件");
if (bytes > * *)
throw new Exception("文件最大只能传10M");
string newfileName = DateTime.Now.ToString("yyyyMMddHHmmss");
string fileDir = HttpContext.Current.Server.MapPath("~/upfiles/");
if (!Directory.Exists(fileDir))
{
Directory.CreateDirectory(fileDir);
}
result.FileName = fileName;
string saveDir = fileDir + newfileName + "." + suffix;
result.FileURL = "~/upfiles/" + newfileName + "." + suffix;
_upfile.SaveAs(result.FileURL);//保存图片 }
}
catch (System.Exception ex)
{
result.Result = false;
result.ErrorMessage = ex.Message;
}
context.Response.Write(JsonHelper.SerializeObject(result));}
</span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">bool</span><span style="color: #000000;"> IsReusable
{
</span><span style="color: #0000ff;">get</span><span style="color: #000000;">
{
</span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">false</span><span style="color: #000000;">;
}
} </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">class</span> UpFileResult <span style="color: #008000;">//</span><span style="color: #008000;">: AshxCommonResult</span>
{
public bool Result { get; set; }
public string ErrorMessage { get; set; }
public string FileName { get; set; }
public string FileURL { get; set; }
}
ajaxfileupload.js
jQuery.extend({handleError: </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (s, xhr, status, e) {
</span><span style="color: #008000;">//</span><span style="color: #008000;"> If a local callback was specified, fire it</span>
<span style="color: #0000ff;">if</span><span style="color: #000000;"> (s.error) {
s.error.call(s.context </span>||<span style="color: #000000;"> s, xhr, status, e);
}
</span><span style="color: #008000;">//</span><span style="color: #008000;"> Fire the global callback</span>
<span style="color: #0000ff;">if</span><span style="color: #000000;"> (s.global) {
(s.context </span>? jQuery(s.context) : jQuery.event).trigger("ajaxError"<span style="color: #000000;">, [xhr, s, e]);
}
},
createUploadIframe: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(id, uri)
{
</span><span style="color: #008000;">//</span><span style="color: #008000;">create frame</span>
<span style="color: #0000ff;">var</span> frameId = 'jUploadFrame' +<span style="color: #000000;"> id;
</span><span style="color: #0000ff;">var</span> iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"'<span style="color: #000000;">;
</span><span style="color: #0000ff;">if</span><span style="color: #000000;">(window.ActiveXObject)
{
</span><span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">typeof</span> uri== 'boolean'<span style="color: #000000;">){
iframeHtml </span>+= ' src="' + 'javascript:false' + '"'<span style="color: #000000;">; }
</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">typeof</span> uri== 'string'<span style="color: #000000;">){
iframeHtml </span>+= ' src="' + uri + '"'<span style="color: #000000;">; }
}
iframeHtml </span>+= ' />'<span style="color: #000000;">;
jQuery(iframeHtml).appendTo(document.body); </span><span style="color: #0000ff;">return</span> jQuery('#' + frameId).get(0<span style="color: #000000;">);
}, createUploadForm: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(id, fileElementId, data)
{
</span><span style="color: #008000;">//</span><span style="color: #008000;">create form </span>
<span style="color: #0000ff;">var</span> formId = 'jUploadForm' +<span style="color: #000000;"> id;
</span><span style="color: #0000ff;">var</span> fileId = 'jUploadFile' +<span style="color: #000000;"> id;
</span><span style="color: #0000ff;">var</span> form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'<span style="color: #000000;">);
</span><span style="color: #0000ff;">if</span><span style="color: #000000;">(data)
{
</span><span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i <span style="color: #0000ff;">in</span><span style="color: #000000;"> data)
{
jQuery(</span>'<input type="hidden" name="' + i + '" value="' + data[i] + '" />'<span style="color: #000000;">).appendTo(form);
}
}
</span><span style="color: #0000ff;">var</span> oldElement = jQuery('#' +<span style="color: #000000;"> fileElementId);
</span><span style="color: #0000ff;">var</span> newElement =<span style="color: #000000;"> jQuery(oldElement).clone();
jQuery(oldElement).attr(</span>'id'<span style="color: #000000;">, fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form); </span><span style="color: #008000;">//</span><span style="color: #008000;">set attributes</span>
jQuery(form).css('position', 'absolute'<span style="color: #000000;">);
jQuery(form).css(</span>'top', '-1200px'<span style="color: #000000;">);
jQuery(form).css(</span>'left', '-1200px'<span style="color: #000000;">);
jQuery(form).appendTo(</span>'body'<span style="color: #000000;">);
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> form;
}, ajaxFileUpload: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(s) {
</span><span style="color: #008000;">//</span><span style="color: #008000;"> TODO introduce global settings, allowing the client to modify them for all requests, not only timeout </span>
s =<span style="color: #000000;"> jQuery.extend({}, jQuery.ajaxSettings, s);
</span><span style="color: #0000ff;">var</span> id = <span style="color: #0000ff;">new</span><span style="color: #000000;"> Date().getTime()
</span><span style="color: #0000ff;">var</span> form = jQuery.createUploadForm(id, s.fileElementId, (<span style="color: #0000ff;">typeof</span>(s.data)=='undefined'?<span style="color: #0000ff;">false</span><span style="color: #000000;">:s.data));
</span><span style="color: #0000ff;">var</span> io =<span style="color: #000000;"> jQuery.createUploadIframe(id, s.secureuri);
</span><span style="color: #0000ff;">var</span> frameId = 'jUploadFrame' +<span style="color: #000000;"> id;
</span><span style="color: #0000ff;">var</span> formId = 'jUploadForm' +<span style="color: #000000;"> id;
</span><span style="color: #008000;">//</span><span style="color: #008000;"> Watch for a new set of requests</span>
<span style="color: #0000ff;">if</span> ( s.global && ! jQuery.active++<span style="color: #000000;"> )
{
jQuery.event.trigger( </span>"ajaxStart"<span style="color: #000000;"> );
}
</span><span style="color: #0000ff;">var</span> requestDone = <span style="color: #0000ff;">false</span><span style="color: #000000;">;
</span><span style="color: #008000;">//</span><span style="color: #008000;"> Create the request object</span>
<span style="color: #0000ff;">var</span> xml =<span style="color: #000000;"> {}
</span><span style="color: #0000ff;">if</span><span style="color: #000000;"> ( s.global )
jQuery.event.trigger(</span>"ajaxSend"<span style="color: #000000;">, [xml, s]);
</span><span style="color: #008000;">//</span><span style="color: #008000;"> Wait for a response to come back</span>
<span style="color: #0000ff;">var</span> uploadCallback = <span style="color: #0000ff;">function</span><span style="color: #000000;">(isTimeout)
{
</span><span style="color: #0000ff;">var</span> io =<span style="color: #000000;"> document.getElementById(frameId);
</span><span style="color: #0000ff;">try</span><span style="color: #000000;">
{
</span><span style="color: #0000ff;">if</span><span style="color: #000000;">(io.contentWindow)
{
xml.responseText </span>= io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:<span style="color: #0000ff;">null</span><span style="color: #000000;">;
xml.responseXML </span>= io.contentWindow.document.XMLDocument?<span style="color: #000000;">io.contentWindow.document.XMLDocument:io.contentWindow.document; }</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span><span style="color: #000000;">(io.contentDocument)
{
xml.responseText </span>= io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:<span style="color: #0000ff;">null</span><span style="color: #000000;">;
xml.responseXML </span>= io.contentDocument.document.XMLDocument?<span style="color: #000000;">io.contentDocument.document.XMLDocument:io.contentDocument.document;
}
}</span><span style="color: #0000ff;">catch</span><span style="color: #000000;">(e)
{
jQuery.handleError(s, xml, </span><span style="color: #0000ff;">null</span><span style="color: #000000;">, e);
}
</span><span style="color: #0000ff;">if</span> ( xml || isTimeout == "timeout"<span style="color: #000000;">)
{
requestDone </span>= <span style="color: #0000ff;">true</span><span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span><span style="color: #000000;"> status;
</span><span style="color: #0000ff;">try</span><span style="color: #000000;"> {
status </span>= isTimeout != "timeout" ? "success" : "error"<span style="color: #000000;">;
</span><span style="color: #008000;">//</span><span style="color: #008000;"> Make sure that the request was successful or notmodified</span>
<span style="color: #0000ff;">if</span> ( status != "error"<span style="color: #000000;"> )
{
</span><span style="color: #008000;">//</span><span style="color: #008000;"> process the data (runs the xml through httpData regardless of callback)</span>
<span style="color: #0000ff;">var</span> data =<span style="color: #000000;"> jQuery.uploadHttpData( xml, s.dataType );
</span><span style="color: #008000;">//</span><span style="color: #008000;"> If a local callback was specified, fire it and pass it the data</span>
<span style="color: #0000ff;">if</span><span style="color: #000000;"> ( s.success )
s.success( data, status ); </span><span style="color: #008000;">//</span><span style="color: #008000;"> Fire the global callback</span>
<span style="color: #0000ff;">if</span><span style="color: #000000;">( s.global )
jQuery.event.trigger( </span>"ajaxSuccess"<span style="color: #000000;">, [xml, s] );
} </span><span style="color: #0000ff;">else</span><span style="color: #000000;">
jQuery.handleError(s, xml, status);
} </span><span style="color: #0000ff;">catch</span><span style="color: #000000;">(e)
{
status </span>= "error"<span style="color: #000000;">;
jQuery.handleError(s, xml, status, e);
} </span><span style="color: #008000;">//</span><span style="color: #008000;"> The request was completed</span>
<span style="color: #0000ff;">if</span><span style="color: #000000;">( s.global )
jQuery.event.trigger( </span>"ajaxComplete"<span style="color: #000000;">, [xml, s] ); </span><span style="color: #008000;">//</span><span style="color: #008000;"> Handle the global AJAX counter</span>
<span style="color: #0000ff;">if</span> ( s.global && ! --<span style="color: #000000;">jQuery.active )
jQuery.event.trigger( </span>"ajaxStop"<span style="color: #000000;"> ); </span><span style="color: #008000;">//</span><span style="color: #008000;"> Process result</span>
<span style="color: #0000ff;">if</span><span style="color: #000000;"> ( s.complete )
s.complete(xml, status); jQuery(io).unbind() setTimeout(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">()
{ </span><span style="color: #0000ff;">try</span><span style="color: #000000;">
{
jQuery(io).remove();
jQuery(form).remove(); } </span><span style="color: #0000ff;">catch</span><span style="color: #000000;">(e)
{
jQuery.handleError(s, xml, </span><span style="color: #0000ff;">null</span><span style="color: #000000;">, e);
} }, </span>100<span style="color: #000000;">) xml </span>= <span style="color: #0000ff;">null</span><span style="color: #000000;"> }
}
</span><span style="color: #008000;">//</span><span style="color: #008000;"> Timeout checker</span>
<span style="color: #0000ff;">if</span> ( s.timeout > 0<span style="color: #000000;"> )
{
setTimeout(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #008000;">//</span><span style="color: #008000;"> Check to see if the request is still happening</span>
<span style="color: #0000ff;">if</span>( !requestDone ) uploadCallback( "timeout"<span style="color: #000000;"> );
}, s.timeout);
}
</span><span style="color: #0000ff;">try</span><span style="color: #000000;">
{ </span><span style="color: #0000ff;">var</span> form = jQuery('#' +<span style="color: #000000;"> formId);
jQuery(form).attr(</span>'action'<span style="color: #000000;">, s.url);
jQuery(form).attr(</span>'method', 'POST'<span style="color: #000000;">);
jQuery(form).attr(</span>'target'<span style="color: #000000;">, frameId);
</span><span style="color: #0000ff;">if</span><span style="color: #000000;">(form.encoding)
{
jQuery(form).attr(</span>'encoding', 'multipart/form-data'<span style="color: #000000;">);
}
</span><span style="color: #0000ff;">else</span><span style="color: #000000;">
{
jQuery(form).attr(</span>'enctype', 'multipart/form-data'<span style="color: #000000;">);
}
jQuery(form).submit(); } </span><span style="color: #0000ff;">catch</span><span style="color: #000000;">(e)
{
jQuery.handleError(s, xml, </span><span style="color: #0000ff;">null</span><span style="color: #000000;">, e);
} jQuery(</span>'#' +<span style="color: #000000;"> frameId).load(uploadCallback );
</span><span style="color: #0000ff;">return</span> {abort: <span style="color: #0000ff;">function</span><span style="color: #000000;"> () {}}; }, uploadHttpData: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">( r, type ) {
</span><span style="color: #0000ff;">var</span> data = !<span style="color: #000000;">type;
data </span>= type == "xml" || data ?<span style="color: #000000;"> r.responseXML : r.responseText;
</span><span style="color: #008000;">//</span><span style="color: #008000;"> If the type is "script", eval it in global context</span>
<span style="color: #0000ff;">if</span> ( type == "script"<span style="color: #000000;"> )
jQuery.globalEval( data );
</span><span style="color: #008000;">//</span><span style="color: #008000;"> Get the JavaScript object, if JSON is used.</span>
<span style="color: #0000ff;">if</span> ( type == "json"<span style="color: #000000;"> )
</span><span style="color: #0000ff;">var</span> reg = /<pre.+?>(.+)<\/pre>/<span style="color: #000000;">g;
</span><span style="color: #0000ff;">var</span> result =<span style="color: #000000;"> data.match(reg);
data </span>= RegExp.$1<span style="color: #000000;">;
eval( </span>"data = " +<span style="color: #000000;"> data );
</span><span style="color: #008000;">//</span><span style="color: #008000;"> evaluate scripts within html</span>
<span style="color: #0000ff;">if</span> ( type == "html"<span style="color: #000000;"> )
jQuery(</span>"<div>"<span style="color: #000000;">).html(data).evalScripts(); </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> data;
}
})
上传文件是常要处理的事情,使用ajaxFileUpload.js处理比较方便,这里的ajaxFileUpload.js文件修改过的,的更多相关文章
- 上传伪技术~很多人都以为判断了后缀,判断了ContentType,判断了头文件就真的安全了。是吗?
今天群里有人聊图片上传,简单说下自己的经验(大牛勿喷) 0.如果你的方法里面是有指定路径的,记得一定要过滤../,比如你把 aa文件夹设置了权限,一些类似于exe,asp,php之类的文件不能执行,那 ...
- 文件上传利器SWFUpload入门简易教程
凡做过网站开发的都应该知道表单file的确鸡肋. Ajax解决了不刷新页面提交表单,但是却没有解决文件上传不刷新页面,当然也有其它技术让不刷新页面而提交文件,该技术主要是利用隐藏的iFrame, 较A ...
- java web(四):request、response一些用法和文件的上传和下载
上一篇讲了ServletContent.ServletCOnfig.HTTPSession.request.response几个对象的生命周期.作用范围和一些用法.今天通过一个小项目运用这些知识.简单 ...
- AJAX上传文件到服务器
上传文件是常要处理的事情,使用ajaxFileUpload.js处理比较方便,这里的ajaxFileUpload.js文件修改过的, Html部分 <input type="file& ...
- C# HTTP系列11 以普通文件流方式上传文件远程服务器
系列目录 [已更新最新开发文章,点击查看详细] 应用程序中上传附件是最常使用的操作之一,ASP.NET客户端一般通过上传控件实现, <input type="file" ...
- jquery.uploadify文件上传组件
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- 11、Struts2 的文件上传和下载
文件上传 表单准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设置 ...
- 小兔Java教程 - 三分钟学会Java文件上传
今天群里正好有人问起了Java文件上传的事情,本来这是Java里面的知识点,而我目前最主要的精力还是放在了JS的部分.不过反正也不麻烦,我就专门开一贴来聊聊Java文件上传的基本实现方法吧. 话不多说 ...
- .JavaWeb文件上传和FileUpload组件使用
.JavaWeb文件上传 1.自定义上传 文件上传时的表单设计要符合文件提交的方式: 1.提交方式:post 2.表单中有文件上传的表单项:<input type="file" ...
随机推荐
- UDP 打洞示例 包含 服务器 客户端
客户端示例: #include "Net.h" #include "../p2pInfo.h" int main() { CUdp udp; if (0!=u ...
- POJ——T 1006 Biorhythms
http://poj.org/problem?id=1006 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 138219 ...
- POJ 3045 Cow Acrobats (最大化最小值)
题目链接:click here~~ [题目大意] 给你n头牛叠罗汉.每头都有自己的重量w和力量s,承受的风险数rank就是该牛上面全部牛的总重量减去该牛自身的力量,题目要求设计一个方案使得全部牛里面风 ...
- Android 调试出现 could not get wglGetExtensionsStringARB
解决 AVD Manager -> 选择模拟器 -> 点击 Edit看 Enabled 是不是被选中了.是的话取消选中,OK.希望对你实用.
- 【前端图表】echarts实现散点图x轴时间轴
话不多说,老规矩,先上图,实现echarts实现散点图,x轴数据为时间年月日. 实现代码如下: <!DOCTYPE html> <html> <head> < ...
- amazeui学习笔记--css(HTML元素1)--按钮Button
amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...
- angular 响应式表单(登录实例)
一.表单验证 1. 只有一个验证规则: this.myGroup = this.fb.group({ email:['hurong.cen@qq.com',Validators.required], ...
- IOS上架App Store商店步骤
苹果官方在2015年05-06月开发者中心进行了改版,网上的APP Store上架大部分都不一样了,自己研究总结一下,一个最新的上架教程以备后用. 原文地址:http://www.16css.com/ ...
- 【Codeforces Round #434 (Div. 2) B】Which floor?
[链接]h在这里写链接 [题意] 在这里写题意 [题解] 枚举每层有多少个公寓就好. 要注意,每次都要从1到100判断,一下那个公寓该不该出现在那一层. 多个答案,如果答案是一样的.也算是唯一的. ...
- [求助]linux同一目录可否挂载多个数据盘?
https://bbs.aliyun.com/read/281222.html?pos=20