upload.htm 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <!DOCTYPE html >
  2. <html>
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=8" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="author" content="TengQiu Li" />
  7. <title>Upload Image</title>
  8. <style type="text/css">
  9. html,body{padding-top:0 ;padding-bottom:0 ;margin-bottom:0;margin-top:0; overflow:hidden;}
  10. .descTxt{font-size:12px; position:relative; top:-8px; left:5px; }
  11. .resultContainer{max-height:200px; overflow:auto;}
  12. .waiting,.uploading,.uploaded{border:1px solid #3300FF; font-size:12px; padding:3px;margin:2px 0;}
  13. .waiting{
  14. background-color:#FFFFE1;
  15. }
  16. .uploading{
  17. padding-left:20px;
  18. background:#FF9 url(loading.gif) no-repeat 2px center;
  19. border-color: #F90;
  20. }
  21. .uploaded{background-color: #F4FFFB;}
  22. .uploadError{background-color: #f00; color:#fff;}
  23. .flash_wrapper{border:none;background:none;padding:0; cursor:pointer;width:80px;height:80px;}
  24. </style>
  25. <script src="swfupload.js" type="text/javascript"></script>
  26. <script src="uploadApi.js" type="text/javascript"></script>
  27. <!--
  28. usage: upload.htm?url=url/to/receive/uploaded/file&type=allow_upload_file_extensions
  29. example:
  30. upload.htm?url=http://www.e512.net/upload.php&type=*.jpg;*.gif;*.png
  31. -->
  32. <script type="text/javascript">
  33. var isIE =!!window.ActiveXObject,
  34. isIE6 = isIE && !window.XMLHttpRequest,
  35. a = location.search.substring(1).split('&'),
  36. urlPath=location.pathname,
  37. //参数,会同时作为POST变量提交至接收页
  38. GET={
  39. 'url':'',
  40. 'max_size':'2 MB', //单文件最大尺寸
  41. 'exts':'*.*', // *.jpg;*.gif;*.png;*.jpeg
  42. 'description':'文件',
  43. 'text':'上 传',
  44. 'field_name':'file',
  45. 'file_max_count':0, //允许上传文件个数, 0表示可以任意
  46. //'is_image':false, //上传的是图片
  47. 'upload_type':'',//上传的调用类型 // link|image|flash|video|music
  48. 'debug':0 //是否显示调试信息
  49. };
  50. //----------------
  51. urlPath=urlPath.substr(0,urlPath.lastIndexOf('/')+1);
  52. for(var i=a.length-1;i>=0;i--){
  53. var p=a[i].indexOf('=');
  54. if(p>0){
  55. GET[a[i].substr(0,p)]=decodeURIComponent(a[i].substring(p+1));
  56. }
  57. }
  58. function str2b(s){ s=s.toLowerCase(); return !(s=='off' || s=='0' || s=='false');}
  59. GET.debug=str2b(GET.debug);
  60. //GET.is_image=str2b(GET.is_image);
  61. GET.upload_type=GET.upload_type;
  62. function $(id){return document.getElementById(id);}
  63. function fixHeight()
  64. {
  65. var h = 18+document.body.offsetHeight;
  66. window.frameElement.style.minHeight=h+'px';
  67. if(isIE6){
  68. var rd=document.getElementById('resultDiv');
  69. if(rd.offsetHeight>100){
  70. rd.style.height='200px';
  71. }
  72. window.frameElement.style.height=h+'px';
  73. }
  74. }
  75. //-----------------------------
  76. //file={post:{},id:'唯一ID',creationdate:'文件创建时间戳',name:'文件名',index:'在队列中的位置索引', type:'.文件后缀', filestatus:-1,modificationdate:'文件修改时间戳',size:'文件大小'}
  77. function fileQueued(file)
  78. {
  79. var e=document.createElement('DIV');
  80. e.id=file.id;
  81. e.innerHTML=file.name;
  82. e.className='waiting';
  83. $('resultDiv').appendChild(e);
  84. fixHeight();
  85. e.scrollIntoView(false);
  86. }
  87. function fileQueueError(file, errorCode, message)
  88. {
  89. switch(errorCode){
  90. case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED : message='超出允许上传数量'; break;
  91. case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT : message='文件太大, 请上传小于'+GET.max_size+'的文件'; break;
  92. case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE : message='空文件'; break;
  93. case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE : message='无效文件类型'; break;
  94. }
  95. this.debug('上传文件 ['+file.name+'] 出错. \n错误码:'+errorCode+'\n出错信息:'+message);
  96. alert('上传文件['+file.name+']出错. \n错误码:'+errorCode+'\n出错信息:'+message);
  97. if($(file.id))$(file.id).className='uploadError';
  98. }
  99. function fileDialogComplete(numFilesSelected, numFilesQueued)
  100. {
  101. try {
  102. if (numFilesQueued > 0) {
  103. this.startUpload();
  104. }
  105. } catch (ex) {
  106. this.debug(ex);
  107. }
  108. }
  109. function uploadProgress(file, bytesLoaded,bytesTotal)
  110. {
  111. $(file.id).className='uploading';
  112. var p=Math.floor(bytesLoaded*100/bytesTotal);
  113. $(file.id).innerHTML='已完成 '+p.toString()+'% '+file.name;
  114. }
  115. function uploadSuccess(file, serverData)
  116. {
  117. //serverData = "{url:'',error_code:'0', message:'succ', exe_js:''}"; // json string
  118. try{
  119. var o= $(file.id);
  120. o.className='uploaded';
  121. var a=eval('['+serverData+']');
  122. var r=a[0];
  123. //selectResult(r.url);
  124. //var e=document.createElement('DIV');
  125. //e.innerHTML=r.url;
  126. //$('resultDiv').appendChild(e);
  127. if(r.error_code>0){
  128. o.innerHTML='文件['+file.name+']上传出错.';
  129. alert('上传文件['+file.name+']出错. \n错误码:'+r.error_code+'\n出错信息:'+r.message);
  130. return;
  131. }else{
  132. var s='';
  133. if(GET.upload_type=='image'){ //is_image
  134. if(parentEditor().config.directInsertUploadImage) insertResult(r.url);
  135. s='<img src="'+r.url+'" onclick="selectResult(\''+r.url+'\')" width=80 height=80 align=left />'+file.name+'<br /><button onclick="selectResult(\''+r.url+'\')">选择</button><br /><button onclick="insertResult(\''+r.url+'\')">插入</button><div style="clear:both"></div>';
  136. }else{
  137. s = '<button onclick="selectResult(\''+r.url+'\')">选择</button>'+file.name;
  138. }
  139. o.innerHTML = s;
  140. }
  141. if(r.exe_js){
  142. try{ eval(r.exe_js); }catch(e){this.debug(e); }
  143. }
  144. fixHeight();
  145. }catch(e){
  146. this.debug(serverData);
  147. }
  148. }
  149. function uploadComplete(file)
  150. {
  151. try {
  152. if (this.getStats().files_queued > 0) {
  153. this.startUpload();
  154. }
  155. } catch (e) {
  156. this.debug(e);
  157. }
  158. }
  159. function uploadError(file, errorCode, message)
  160. {
  161. alert('上传文件['+file.name+']出错. \n错误码:'+errorCode+'\n出错信息:'+message);
  162. }
  163. //-----------------------------
  164. var setting= {
  165. // Backend Settings
  166. upload_url: GET.url,
  167. post_params: {'uploadedBy':'TQEditor'},
  168. // File Upload Settings
  169. file_size_limit : GET.max_size, // 2 MB
  170. file_types : GET.exts,//'*.jpg;*.gif;*png',
  171. file_types_description : GET.description,//"文件",
  172. file_upload_limit : GET.file_max_count,
  173. file_post_name:GET.field_name,
  174. // Event Handler Settings
  175. file_queued_handler : fileQueued,
  176. file_queue_error_handler : fileQueueError,
  177. file_dialog_complete_handler : fileDialogComplete,
  178. upload_progress_handler : uploadProgress,
  179. upload_error_handler : uploadError,
  180. upload_success_handler : uploadSuccess,
  181. upload_complete_handler : uploadComplete,
  182. // Button Settings
  183. button_image_url : "btnBg.gif",
  184. button_placeholder_id : 'container',
  185. button_width: 45,
  186. button_height: 25,
  187. button_text : '<span class="btn">'+GET.text+'</span>',
  188. button_text_style : '.btn{line-height:25px;font-size:12px; text-align:center;}',
  189. button_text_top_padding: 2,
  190. button_text_left_padding: 0,
  191. button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
  192. button_cursor: SWFUpload.CURSOR.HAND,
  193. // Flash Settings
  194. flash_url : urlPath +"swfupload.swf",
  195. // Debug Settings
  196. debug: GET.debug
  197. }
  198. </script>
  199. </head>
  200. <body>
  201. <div style="min-height:45px;" ><span id="container"></span><span class="descTxt"> 允许上传文件格式(<script type="text/javascript">document.write(GET.exts);</script>)</span></div>
  202. <div id="resultDiv" class="resultContainer"></div>
  203. <script type="text/javascript">
  204. new SWFUpload(setting);
  205. //fixHeight();
  206. </script>
  207. </body>
  208. </html>