javascript代码实例教程-jQueryAjaxFileUpload

发布时间:2019-01-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQueryAjaxFileUpload脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

jQueryAjaxFileUpload

项目结构

Default.aspx
Upload.aspx
Scripts/…
style.css

效果图

javascript代码实例教程-jQueryAjaxFileUpload

客户端htML代码

[xhtml]view plaincopy
  1. <%@PageLanguage="vb"AutoEventWireup="false"CodeBehind="UploaDFile.aspx.vb"InherITs="Web.UploadFile"%>
  2.  
  3. <!DOCTYPEhtmlPubLIC"-//W3C//DTDXHTML1.0Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <htmlxmlns="https://www.w3.org/1999/xhtml">
  5. <headrunat="server">
  6. <title></title>
  7. <linkrel="Stylesheet"type="text/css"href="style.css";mce_href="style.css"media="all"/>
  8. <mce:scripttype="text/JavaScript"src="../Scripts/jquery-1.4.1.min.js"mce_src="Scripts/jquery-1.4.1.min.js"></mce:script>
  9. <mce:scripttype="text/javascript"src="../Scripts/ajaxupload.3.5.js"mce_src="Scripts/ajaxupload.3.5.js"></mce:script>
  10. <mce:scripttype="text/javascript"><!--
  11. $(function(){
  12. VARBTnUpload=$(&#39;#upload');
  13. varstatus=$('#status');
  14. newAjaxUpload(btnUpload,{
  15. action:'Upload.aspx',
  16. //Nameofthefileinputbox
  17. name:'uploadfile',
  18. onSubmit:function(file,ext){
  19. if(!(ext&&/^(jpg|png|jpeg|gif)$/.test(ext))){
  20. //checkforvalidfileextension
  21. status.text('OnlyJPG,PNGorGIFfilesareAllowed');
  22. returnfalse;
  23. }
  24. status.text('Uploading...');
  25. },
  26. onComplete:function(file,response){
  27. //Oncompletionclearthestatus
  28. status.text('');
  29. //Adduploadedfiletolist
  30. if(response==="success"){
  31. $('<li></li>').appendTo('#files').html('<imgsrc="./uploads/'+file+'"mce_src="uploads/'+file+'"alt=""/><br/>'+file).addClass('success');
  32. }else{
  33. $('<li></li>').appendTo('#files').text(file).addClass('error');
  34. }
  35. }
  36. });
  37. });
  38.  
  39.  
  40. //--></mce:script>
  41. </head>
  42. <body>
  43. <formid="form1"runat="server">
  44. <pid="upload">
  45. UploadFile
  46. </p>
  47.  
  48. <!--UploadButton-->
  49. <pid="Div1">UploadFile</p><spanid="status"></span>
  50. <!--ListFiles-->
  51. <ulid="files"></ul>
  52.  
  53.  
  54. </form>
  55. </body>
  56. </html>

    服务端处理代码Upload.aspx

    [c-sharp]view plaincopy
    1. usingSystem;
    2. usingSystem.Collections.Generic;
    3. usingSystem.Linq;
    4. usingSystem.Web;
    5. usingSystem.Web.UI;
    6. usingSystem.Web.UI.WebControls;
    7.  
    8. namespaceJqueryAjaxUploadTest
    9. {
    10. publicpartialclassUpload:System.Web.UI.Page
    11. {
    12. PRotectedvoidPage_Load(objectsender,Eventargse)
    13. {
    14. try
    15. {
    16. HttpPostedFilehpfFile=Request.Files["uploadfile"];
    17. hpfFile.SaveAs(Server.MapPath("~/uploads/")+hpfFile.FileName);
    18. Response.Write("success");
    19. }
    20. catch(Exception)
    21. {
    22.  
    23. Response.Write("fail");
    24. }
    25. }
    26. }
    27. }

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQueryAjaxFileUpload全部内容,希望文章能够帮你解决javascript代码实例教程-jQueryAjaxFileUpload所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。