upload.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  5. <title>测试</title>
  6. <script type="text/javascript" src="/nwyj/scripts/qui/libs/js/jquery.js"></script>
  7. <link rel="stylesheet" type="text/css" href="/nwyj/scripts/jquery/jqueryUi/jquery-ui.css" />
  8. <script type="text/javascript" src="/nwyj/scripts/jquery/jqueryUi/jquery-ui.js"></script>
  9. <script type="text/javascript" src="/nwyj/scripts/webUploader/webuploader.js"></script>
  10. </head>
  11. <body >
  12. <div>
  13. <input type='hidden' name ='uploaderFileRealName' id = 'uploaderFileRealName'/>
  14. <input type='hidden' name ='uploaderFileName' id = 'uploaderFileName'/>
  15. <input type='hidden' name ='uploaderFileExt' id = 'uploaderFileExt'/>
  16. <div id="picker">选择文件</div>
  17. <div id="progressbar" style="width:200px"></div>
  18. <script type="text/javascript" >
  19. // 图片上传demo
  20. jQuery(function() {
  21. $("#progressbar").progressbar({
  22. value: 0
  23. });
  24. var uploader;
  25. // 初始化Web Uploader
  26. uploader = WebUploader.create({
  27. // 自动上传。
  28. auto: true,
  29. // swf文件路径
  30. swf: '/nwyj/scripts/webUploader/Uploader.swf',
  31. // 文件接收服务端。
  32. server: '/nwyj/Upload',
  33. // 选择文件的按钮。可选。
  34. // 内部根据当前运行是创建,可能是input元素,也可能是flash.
  35. pick: '#picker'
  36. });
  37. // 当有文件添加进来的时候
  38. uploader.on( 'fileQueued', function( file ) {
  39. });
  40. // 文件上传过程中创建进度条实时显示。
  41. uploader.on('uploadProgress', function( file, percentage ) {
  42. $( "#progressbar" ).progressbar( "value", percentage * 100 );
  43. });
  44. // 文件上传成功,给item添加成功class, 用样式标记上传成功。
  45. uploader.on( 'uploadSuccess', function( file ) {
  46. });
  47. // 文件上传失败,现实上传出错。
  48. uploader.on( 'uploadError', function( file ) {
  49. });
  50. // 完成上传完了,成功或者失败,先删除进度条。
  51. uploader.on( 'uploadComplete', function( file ) {
  52. });
  53. });
  54. </script>
  55. </body>
  56. </html>