脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQueryAjaxFileUpload,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
jQueryAjaxFileUpload
项目结构
Default.aspx
Upload.aspx
Scripts/…
style.css
效果图
客户端htML代码
[xhtml]view plaincopy - <%@PageLanguage="vb"AutoEventWireup="false"CodeBehind="UploaDFile.aspx.vb"InherITs="Web.UploadFile"%>
-
- <!DOCTYPEhtmlPubLIC"-//W3C//DTDXHTML1.0Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlns="https://www.w3.org/1999/xhtml">
- <headrunat="server">
- <title></title>
- <linkrel="Stylesheet"type="text/css"href="style.css"mce_href="style.css"media="all"/>
- <mce:scripttype="text/JavaScript"src="../Scripts/jquery-1.4.1.min.js"mce_src="Scripts/jquery-1.4.1.min.js"></mce:script>
- <mce:scripttype="text/javascript"src="../Scripts/ajaxupload.3.5.js"mce_src="Scripts/ajaxupload.3.5.js"></mce:script>
- <mce:scripttype="text/javascript"><!--
- $(function(){
- VARBTnUpload=$('#upload');
- varstatus=$('#status');
- newAjaxUpload(btnUpload,{
- action:'Upload.aspx',
- //Nameofthefileinputbox
- name:'uploadfile',
- onSubmit:function(file,ext){
- if(!(ext&&/^(jpg|png|jpeg|gif)$/.test(ext))){
- //checkforvalidfileextension
- status.text('OnlyJPG,PNGorGIFfilesareAllowed');
- returnfalse;
- }
- status.text('Uploading...');
- },
- onComplete:function(file,response){
- //Oncompletionclearthestatus
- status.text('');
- //Adduploadedfiletolist
- if(response==="success"){
- $('<li></li>').appendTo('#files').html('<imgsrc="./uploads/'+file+'"mce_src="uploads/'+file+'"alt=""/><br/>'+file).addClass('success');
- }else{
- $('<li></li>').appendTo('#files').text(file).addClass('error');
- }
- }
- });
- });
-
-
- //--></mce:script>
- </head>
- <body>
- <formid="form1"runat="server">
- <pid="upload">
- UploadFile
- </p>
-
- <!--UploadButton-->
- <pid="Div1">UploadFile</p><spanid="status"></span>
- <!--ListFiles-->
- <ulid="files"></ul>
-
-
- </form>
- </body>
- </html>
服务端处理代码Upload.aspx
[c-sharp]view plaincopy - usingSystem;
- usingSystem.Collections.Generic;
- usingSystem.Linq;
- usingSystem.Web;
- usingSystem.Web.UI;
- usingSystem.Web.UI.WebControls;
-
- namespaceJqueryAjaxUploadTest
- {
- publicpartialclassUpload:System.Web.UI.Page
- {
- PRotectedvoidPage_Load(objectsender,Eventargse)
- {
- try
- {
- HttpPostedFilehpfFile=Request.Files["uploadfile"];
- hpfFile.SaveAs(Server.MapPath("~/uploads/")+hpfFile.FileName);
- Response.Write("success");
- }
- catch(Exception)
- {
-
- Response.Write("fail");
- }
- }
- }
- }
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
脚本宝典总结
以上是脚本宝典为你收集整理的javascript代码实例教程-jQueryAjaxFileUpload全部内容,希望文章能够帮你解决javascript代码实例教程-jQueryAjaxFileUpload所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。