jquery异步上传组件SmartUpload_第1张图片

源码：

 

   
   
   
   
    
    
    
    
    
  1. > 
    2. 
    
    
    
    
  2. <html> 
    3. 
    
    
    
    
  3. <head> 
    4. 
    
    
    
    
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    5. 
    
    
    
    
  5. <title>SmartUploadtitle> 
    6. 
    
    
    
    
  6. <link rel="stylesheet" href="reset.css">link> 
    7. 
    
    
    
    
  7. <link rel="stylesheet" href="demo.css">link> 
    8. 
    
    
    
    
  8. <style> 
    9. 
    
    
    
    
  9. @media screen and (-webkit-min-device-pixel-ratio:0){ .ks-smartupload-file {margin-left:-370px;} }  /*chrome and safari*/ 
    10. 
    
    
    
    
  10. style> 
    11. 
    
    
    
    
  11. head> 
    12. 
    
    
    
    
  12. <body> 
    13. 
    
    
    
    
  13. <h1>SmartUpload(Default)h1> 
    14. 
    
    
    
    
  14. <div>默认模式div> 
    15. 
    
    
    
    
  15. <div class="wrapper"><a href='#' id="J_btn" class='J_btn'>上传a>div> 
    16. 
    
    
    
    
  16. <script type="text/javascript" src="jquery-latest.min.js">script> 
    17. 
    
    
    
    
  17. <script type="text/javascript" src="smartupload.js">script> 
    18. 
    
    
    
    
  18. <script type="text/javascript"> 
    19. 
    
    
    
    
  19. (function($){ 
    20. 
    
    
    
    
  20. /** 
    21. 
    
    
    
    
  21.  * $.fn.SmartUpload(target,cfg)  
    22. 
    
    
    
    
  22.  * @param target 上传按钮  
    23. 
    
    
    
    
  23.  * @param cfg 配置项 
    24. 
    
    
    
    
  24.  * 
    25. 
    
    
    
    
  25.  */ var title = ""; 
    26. 
    
    
    
    
  26.      
    27. 
    
    
    
    
  27.         var su = new $.fn.SmartUpload("#J_btn",{ 
    28. 
    
    
    
    
  28.             //上传类型 
    29. 
    
    
    
    
  29.             type:"iframe", 
    30. 
    
    
    
    
  30.             //上传路径 
    31. 
    
    
    
    
  31.             url:"upload.php", 
    32. 
    
    
    
    
  32.             //返回类型 
    33. 
    
    
    
    
  33.             //dataType:"json", 
    34. 
    
    
    
    
  34.             fileName:"fileData", 
    35. 
    
    
    
    
  35.             //回调 
    36. 
    
    
    
    
  36.             success:function(data){ 
    37. 
    
    
    
    
  37.                 //callback 
    38. 
    
    
    
    
  38.                 alert(data); 
    39. 
    
    
    
    
  39.                  
    40. 
    
    
    
    
  40.             } 
    41. 
    
    
    
    
  41.              
    42. 
    
    
    
    
  42.         }); 
    43. 
    
    
    
    
  43.  
    44. 
    
    
    
    
  44.         $("#J_submit").click(function(){ 
    45. 
    
    
    
    
  45.             //可以传输动态获取的数据至服务器 
    46. 
    
    
    
    
  46.             su.setData({"sendData":$("#J_param_text").val()}); 
    47. 
    
    
    
    
  47.              
    48. 
    
    
    
    
  48.             su.submit(); 
    49. 
    
    
    
    
  49.              
    50. 
    
    
    
    
  50.         }); 
    51. 
    
    
    
    
  51.          
    52. 
    
    
    
    
  52. })(jQuery); 
    53. 
    
    
    
    
  53. script> 
    54. 
    
    
    
    
  54. body> 
    55. 
    
    
    
    
  55. html> 
    56.