新年礼物，提供简单易用的jQuery AJAX上传示例和代码下载。用C#/上传并检查后台文件。NET处理程序(如果需要，可以重写为Java或PHP)。

有时候作为一个网站项目(不管是不是ASP.NET)，内置的FileUpload控件功能不够(页面必须刷新，不支持AJAX)，或者外观太丑被用户拒绝(但是外观不能通过CSS自定义)。虽然网上有很多可用的例子，比如jQuery File Upload，但是它的功能太强大了，外观也比较复杂，不容易拿出一些功能来参考。所以我参考了两本书和很多网络上的例子，集成重写到这个例子中，标榜：功能简单(刚好够用)、外观可定制(只使用div、span和HTML的输入，不受特定厂商控制的束缚)、未来其他网站项目使用方便(公司其他程序员不用重写一堆jQuery、JavaScript和CSS)。- .

(稍后介绍)(要执行此示例，您不需要数据库，但需要IIS或visual studio)。

用Visual Studio或IIS打开一个网站，用任一浏览器运行SingleUpload.html或MultiUpload.html。上传的文件(图片)存储在/uploadFiles文件夹下。-

图1示例架构。

-

图2执行屏幕-单次上传指蓝色CSS文件。

图3执行屏幕-单次上传是指绿色的CSS文件。

图4执行画面-多次上传参照银色CSS文件。

- .

*上传用jQuery AJAX处理，图片不会刷新(调用jQuery Form ajaxSubmit [5]，异步提交表单)。*可以自定义“上传按钮和进度条”的外观，引用自己想要的CSS(本例提供：绿色、蓝色、银色，可以引用三个CSS文档)。*上传过程中，会显示一个进度条。*上传后，会出现预览。*上传后会出现“删除图片”超链接，允许用户删除刚上传的图片。*可限制上传图片的扩展名和文件大小上限(由c #/wizardwupload.ashx控制)，并会给用户相关警告信息。* IE、FireFox和Chrome的外观都是一样的(这也是jQuery的一个特性)。* .html，aspx可以应用这个例子。在PHP或JSP的情况下，WizardWuUpload.ashx应该自己重写，但是jQuery不需要重写。本例的特征：

*在网站项目中要实用、易于应用，而不是外表强大华丽。* css和jQuery被提取出来成为独立的共享文档，便于在项目中应用这个例子，不需要重复编写每一页。*页面上DOM对象(控件)的id是专门命名的，便于在项目中应用这个例子。-

html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title无刷新上传文件-页面只有一个上传/title！- link rel='样式表href=' CSS/WizardWupload _ blue。CSS '/-link rel='样式表href=' CSS/WizardWupload _ green。CSS '/！- link rel='样式表href=' CSS/wizardwouupload _ silver。CSS '/-脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。7 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : js/jquery。形式。js /脚本脚本类型=' text/JAVAScript ' src=' http 3360 js/wizardwujs '傳入的參數，為該divUploadArea區塊中，所有数字正射影像图对象（控件)的编号編號，如： divUploadArea1、spanUploadSelect1、WizardWuFileUpload1、$(这个)。loadUploadContent(' 1 ')；//載入第一個上傳區塊divUploadArea1所需要的形式及框架內容});/script/headbody h2WizardWu无刷新上传文件-页面只有一个上传/h2表tr td p只允许上传jpg/jpeg/gif/png/bmp格式的图片，图片大小不能超过1mb/p div class=' UploadArea ' id=' diuploadadarea 1 ' div class=' UploadButton ' span id=' spanpuploadselect1 '选择文件/span！-上传用的文件控件-输入id='WizardWuFileUpload1 '类型=“文件”名称='此处名字可随便命名，名称名称可重复//div！-显示加载进度-div class=' upload progress ' id=' diupload progress 1 ' span class=' upload bar ' id=' spanpupload bar 1 '/span span class='上传百分比' id=' spanpupload percent 1 ' 0%/span/div！-显示已经上传的文件名、上传成功才会出现的「删除图片」字样超连接、删除成功才会出现的「删除成功」字样-div class=' ShowContentAfterUploadSuccess ' id=' div ShowContentAfterUploadSuccess 1 '/div！-显示已经上传的图片-div id=' divShowImageAfterUploadSuccess1 '/div/div/TD/tr/table/body/html引用此示例的超文本标记语言

ASP。网内附文件上传控件的问题：

* 上传时画面会恢复精神刷新，无法套用AJAX /更新面板相关功能。* 控件的外观，被微软写死，无法透过引用半铸钢钢性铸铁(铸造半钢)改变外观*谷歌浏览器与IE、FireFox、不同的浏览器，外观上呈现会不一致。 - 网路上jQuery文件上传的问题：

http://blueimp.github.io/jQuery-File-Upload/*功能强大、外观太复杂，想仅取出部分功能，来套用或改写有难度。 -

小伙伴们仔细研究下吧，希望大家能够喜欢本文。