1. /*/*
  2. * Unobstrusive swf upload widget using jQuery.
  3. *example : $(':file.uo_widget_form_input_file_swf_upload').uoWidgetFormInputFileSwfUpload({});
  4. *
  5. * @author François Béliveau <francois.beliveau@my-labz.com>
  6. **/
  7. var uo_widget_form_input_file_swf_upload_config = {};
  8. var uo_widget_form_input_file_swf_upload_count = 0;
  9. (function($) {
  10.  
  11. $.fn.uoWidgetFormInputFileSwfUpload = function(customConfiguration)
  12. {
  13. // default configuration
  14. var configuration = {
  15. labels: {
  16. browse: 'browse'
  17. },
  18. images: {
  19. browse: '/sf_unobstrusive_widget/images/default/uo_widget_form_input_file_swf_upload/folder_explore.png'
  20. },
  21. upload_auto: false,
  22. upload_url: false,
  23. file_post_name: 'swf_upload_file',
  24.  
  25. // Flash file settings
  26. file_size_limit: '10240', //10 MB
  27. file_types: '*.*',
  28. file_types_description: 'All files',
  29. file_upload_limit: '0',
  30. file_queue_limit: '1',
  31.  
  32. // Button Settings
  33. button_width: 16,
  34. button_height: 16,
  35.  
  36. // Flash Settings
  37. flash_url : "/sf_unobstrusive_widget/vendor/swf_upload/swfupload.swf",
  38.  
  39. // Debug settings
  40. debug: false
  41. };
  42.  
  43. $.extend(true, configuration, customConfiguration);
  44.  
  45. return this.each(function(index)
  46. {
  47. var $widget = $(this);
  48. var $widgetId = $widget.attr('id');
  49. var $widgetName = $widget.attr('name');
  50. var $widgetFileName = false;
  51. var $swfUpload = false;
  52. var $index = uo_widget_form_input_file_swf_upload_count;
  53. var handlers = {
  54. swfupload_loaded_handler: false,
  55. file_dialog_start_handler: false,
  56. file_queue_error_handler: false,
  57. file_dialog_complete_handler: false,
  58. upload_start_handler: false,
  59. upload_progress_handler: false,
  60. upload_error_handler: false,
  61. upload_success_handler: false,
  62. upload_complete_handler: false,
  63. file_queued_handler: false,
  64. swfupload_loaded_handler: false,
  65. swfupload_loaded_handler: false
  66. };
  67.  
  68. // merge default and custom configuration
  69. if (typeof(uo_widget_form_input_file_swf_upload_config[$widgetId]) == 'object')
  70. {
  71. for (handlerName in handlers)
  72. {
  73. if (typeof(uo_widget_form_input_file_swf_upload_config[$widgetId][handlerName]) == 'function')
  74. {
  75. handlers[handlerName] = uo_widget_form_input_file_swf_upload_config[$widgetId][handlerName];
  76. }
  77. }
  78. }
  79.  
  80. /**
  81. * Initialize widget
  82. */
  83. function init()
  84. {
  85. // prevent initialize twice
  86. if ($widget.hasClass('uo_widget_form_input_file_swf_upload_ON'))
  87. {
  88. return $widget;
  89. }
  90.  
  91. if (typeof(SWFUpload) != "function")
  92. {
  93. alert('Unable to initialize SWFUpload widget: SWFUpload is not defined');
  94. return $widget;
  95. }
  96.  
  97. $widget.removeClass('uo_widget_form_input_file_swf_upload');
  98. $widget.addClass('uo_widget_form_input_file_swf_upload_ON');
  99.  
  100. config = getConfiguration();
  101. if (config.upload_url)
  102. {
  103. $widget.after(getHtmlTemplate(config))
  104. var newWidget = $widget.next();
  105. $widget.remove();
  106.  
  107. $widget = newWidget;
  108. $widgetFileName = $('#'+$widgetId);
  109.  
  110. $swfUpload = new SWFUpload(config);
  111. uo_widget_form_input_file_swf_upload_count++;
  112. }
  113. else
  114. {
  115. alert('Unable to initialize SWFUpload widget: invalid upload url');
  116. }
  117. }
  118.  
  119. /**
  120. * Return widget's specific configuration
  121. */
  122. function getConfiguration()
  123. {
  124. var result = uo_widget_form_input_file_swf_upload_config[$widgetId] || {};
  125. result = $.extend(true, configuration, result);
  126.  
  127. // Event handler settings
  128. result.swfupload_loaded_handler = swfUploadLoaded,
  129. result.file_dialog_start_handler = fileDialogStart;
  130. result.file_queue_error_handler = fileQueueError;
  131. result.file_dialog_complete_handler = fileDialogComplete;
  132. result.upload_start_handler = uploadStart;
  133. result.upload_progress_handler = uploadProgress;
  134. result.upload_error_handler = uploadError;
  135. result.upload_success_handler = uploadSuccess;
  136. result.upload_complete_handler = uploadComplete;
  137.  
  138. if (undefined == result.custom_settings)
  139. {
  140. result.custom_settings = {};
  141. }
  142. result.custom_settings.progress_target = $widgetId+'_flash',
  143. result.custom_settings.upload_successful = false;
  144.  
  145. result.button_window_mode = SWFUpload.WINDOW_MODE.TRANSPARENT;
  146.  
  147. result.button_placeholder_id = $widgetId+'_browse';
  148. if (result.images.browse)
  149. {
  150. result.button_image_url = result.images.browse;
  151. }
  152. else
  153. {
  154. result.button_text = result.labels.browse;
  155. }
  156.  
  157. if (result.upload_auto)
  158. {
  159. result.file_queued_handler = fileQueuedAutoUpload;
  160. }
  161. else
  162. {
  163. result.file_queued_handler = fileQueued;
  164. }
  165.  
  166. return result
  167. }
  168.  
  169. /**
  170. * Return widget's HTML template
  171. */
  172. function getHtmlTemplate(config)
  173. {
  174. result = '<div class="uo_widget_form_input_file_swf_upload_ON_container">'
  175. + ' <div class="field">'
  176. + ' <input id="'+$widgetId+'" type="text" class="text" readonly="readonly" />'
  177. + ' <span id="'+$widgetId+'_browse">'+config.labels.browse+'</span>'
  178. + ' </div>'
  179. //This is where the file progress gets shown
  180. + ' <div class="flash" id="'+$widgetId+'_flash"></div>'
  181. //This is where the file ID is stored after SWFUpload uploads the file and gets the ID back from upload PHP script
  182. + ' <input type="hidden" name="'+$widgetName+'" value="" />'
  183. + '</div>'
  184.  
  185. return $(result);
  186. }
  187.  
  188. /**
  189. * Start upload
  190. */
  191. function doUpload(e)
  192. {
  193. try
  194. {
  195. $swfUpload.startUpload();
  196. }
  197. catch(ex){}
  198.  
  199. return false;
  200. }
  201.  
  202. /**
  203. * Called by the queue complete handler to submit the form
  204. */
  205. function uploadDone()
  206. {
  207. try
  208. {
  209. $swfUpload.destroy();
  210. $widget.parents('form:first')
  211. .unbind('submit', doUpload)
  212. .submit();
  213. }
  214. catch(ex)
  215. {
  216. alert("Error submitting form");
  217. }
  218. }
  219.  
  220. /**
  221. * Cancel upload if allready start
  222. */
  223. function fileDialogStart()
  224. {
  225. $swfUpload.cancelUpload();
  226.  
  227. if (typeof(handlers.file_dialog_start_handler) == 'function')
  228. {
  229. handlers.file_dialog_start_handler();
  230. }
  231. }
  232.  
  233. /**
  234. * Handle this error separately because we don't want to create a FileProgress element for it.
  235. */
  236. function fileQueueError(file, errorCode, message)
  237. {
  238. try
  239. {
  240. switch (errorCode)
  241. {
  242. case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
  243. alert("You have attempted to queue too many files.\n" + (message === 0 ? "You have reached the upload limit." : "You may select " + (message > 1 ? "up to " + message + " files." : "one file.")));
  244. return false;
  245. case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
  246. alert("The file you selected is too big.");
  247. this.debug("Error Code: File too big, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
  248. return false;
  249. case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
  250. alert("The file you selected is empty. Please select another file.");
  251. this.debug("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
  252. return false;
  253. case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
  254. alert("The file you choose is not an allowed file type.");
  255. this.debug("Error Code: Invalid File Type, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
  256. return false;
  257. default:
  258. alert("An error occurred in the upload. Try again later.");
  259. this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
  260. return false;
  261. }
  262. }
  263. catch(e){}
  264.  
  265. if (typeof(handlers.file_queue_error_handler) == 'function')
  266. {
  267. handlers.file_queue_error_handler(file, errorCode, message);
  268. }
  269. }
  270.  
  271. function fileQueued(file)
  272. {
  273. $widget.parents('form:first')
  274. .unbind('submit', doUpload)
  275. .submit(doUpload);
  276. $widgetFileName.val(file.name);
  277.  
  278. if (typeof(handlers.file_queued_handler) == 'function')
  279. {
  280. handlers.file_queued_handler(file);
  281. }
  282. }
  283.  
  284. function fileQueuedAutoUpload(file)
  285. {
  286. $widgetFileName.val(file.name);
  287. doUpload();
  288.  
  289. if (typeof(handlers.file_queued_handler) == 'function')
  290. {
  291. handlers.file_queued_handler(file);
  292. }
  293. }
  294.  
  295. function uploadProgress(file, bytesLoaded, totalBytes)
  296. {
  297. try
  298. {
  299. var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);
  300.  
  301. file.id = "singlefile"; // This makes it so FileProgress only makes a single UI element, instead of one for each file
  302. var progress = new FileProgress(file, this.customSettings.progress_target);
  303. progress.setProgress(percent);
  304. progress.setStatus("Uploading...");
  305. }
  306. catch(e){}
  307.  
  308. if (typeof(handlers.upload_progress_handler) == 'function')
  309. {
  310. handlers.upload_progress_handler(file, bytesLoaded, totalBytes);
  311. }
  312. }
  313.  
  314. function uploadSuccess(file, serverData, receivedResponse)
  315. {
  316. try
  317. {
  318. file.id = "singlefile"; // This makes it so FileProgress only makes a single UI element, instead of one for each file
  319. var progress = new FileProgress(file, this.customSettings.progress_target);
  320. progress.setComplete();
  321. progress.setStatus("Complete.");
  322. progress.toggleCancel(false);
  323.  
  324. if (serverData === " ")
  325. {
  326. this.customSettings.upload_successful = false;
  327. }
  328. else
  329. {
  330. this.customSettings.upload_successful = true;
  331. $('input[name="'+$widgetName+'"]', $widget).val(serverData);
  332. }
  333. }
  334. catch(e){}
  335.  
  336. if (typeof(handlers.upload_success_handler) == 'function')
  337. {
  338. handlers.upload_success_handler(file, serverData, receivedResponse);
  339. }
  340. }
  341.  
  342. function uploadComplete(file)
  343. {
  344. try
  345. {
  346. if (this.customSettings.upload_successful)
  347. {
  348. var config = getConfiguration();
  349. if (!config.upload_auto)
  350. {
  351. uploadDone();
  352. }
  353. }
  354. else
  355. {
  356. file.id = "singlefile"; // This makes it so FileProgress only makes a single UI element, instead of one for each file
  357. var progress = new FileProgress(file, this.customSettings.progress_target);
  358. progress.setError();
  359. progress.setStatus("File rejected");
  360. progress.toggleCancel(false);
  361.  
  362. $widgetFileName.val('');
  363.  
  364. alert("There was a problem with the upload.\nThe server did not accept it.");
  365. }
  366. }
  367. catch(e){}
  368.  
  369. if (typeof(handlers.upload_complete_handler) == 'function')
  370. {
  371. handlers.upload_complete_handler(file);
  372. }
  373. }
  374.  
  375. function uploadError(file, errorCode, message)
  376. {
  377. try
  378. {
  379. if (errorCode === SWFUpload.UPLOAD_ERROR.FILE_CANCELLED)
  380. {
  381. // Don't show cancelled error boxes
  382. return;
  383. }
  384.  
  385. $widgetFileName.val('');
  386.  
  387. // Handle this error separately because we don't want to create a FileProgress element for it.
  388. switch (errorCode)
  389. {
  390. case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
  391. alert("There was a configuration error. You will not be able to upload a resume at this time.");
  392. this.debug("Error Code: No backend file, File name: " + file.name + ", Message: " + message);
  393. return;
  394. case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
  395. alert("You may only upload 1 file.");
  396. this.debug("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
  397. return;
  398. case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
  399. case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
  400. break;
  401. default:
  402. alert("An error occurred in the upload. Try again later.");
  403. this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
  404. return;
  405. }
  406.  
  407. file.id = "singlefile"; // This makes it so FileProgress only makes a single UI element, instead of one for each file
  408. var progress = new FileProgress(file, this.customSettings.progress_target);
  409. progress.setError();
  410. progress.toggleCancel(false);
  411.  
  412. switch (errorCode)
  413. {
  414. case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
  415. progress.setStatus("Upload Error");
  416. this.debug("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);
  417. break;
  418. case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
  419. progress.setStatus("Upload Failed.");
  420. this.debug("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
  421. break;
  422. case SWFUpload.UPLOAD_ERROR.IO_ERROR:
  423. progress.setStatus("Server (IO) Error");
  424. this.debug("Error Code: IO Error, File name: " + file.name + ", Message: " + message);
  425. break;
  426. case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
  427. progress.setStatus("Security Error");
  428. this.debug("Error Code: Security Error, File name: " + file.name + ", Message: " + message);
  429. break;
  430. case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
  431. progress.setStatus("Upload Cancelled");
  432. this.debug("Error Code: Upload Cancelled, File name: " + file.name + ", Message: " + message);
  433. break;
  434. case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
  435. progress.setStatus("Upload Stopped");
  436. this.debug("Error Code: Upload Stopped, File name: " + file.name + ", Message: " + message);
  437. break;
  438. }
  439. }
  440. catch(ex){}
  441.  
  442. if (typeof(handlers.upload_error_handler) == 'function')
  443. {
  444. handlers.upload_error_handler(file, errorCode, message);
  445. }

  

上传文件swfUploadConfig.js的更多相关文章

  1. OSS阿里云上传文件 前端js下载url跨域问题

    场景: 1.后端上传文件至阿里云OSS,返回得到一个URL. 2.前端用这个URL下载文件,ajax请求异常:No 'Access-Control-Allow-Origin' header is pr ...

  2. C# asp:FileUpload上传文件使用JS实现预览效果

    js代码: <script type="text/javascript"> //下面用于图片上传预览功能 function setImagePreview() { va ...

  3. fromdata上传文件,ajax上传文件, 纯js上传文件,html5文件异步上传

    前端代码: 上传附件(如支付凭证等) <input type="file" name="fileUpload" id="fileUpload&q ...

  4. JavaScript Ajax上传文件miniupload.js

    用到jquery和layer.js (function ($) { $.fn.miniupload = function (options, callback) { var jqDom = $(thi ...

  5. 阿里云 oss 上传文件,js直传,.net 签名,回调

    后台签名 添加引用 string dir = string.Format("{0:yyyy-MM-dd}", date) + "/"; OssClient cl ...

  6. 前端之web上传文件的方式

    前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构造请求上传文件 1. web上传 ...

  7. 第九篇:web之前端之web上传文件的方式

    前端之web上传文件的方式   前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构 ...

  8. Juploader 1.0 谷歌(chrome)浏览器中成功上传文件后返回信息异常

    在项目中使用了Juploader 1.0无刷新上传文件的js组件,在IE8以上没有问题,代码如下: function InitialUploadDirectly(OnUploadFunc, butto ...

  9. 上传文件调用webapi方式

    选择文件 <div> <label for="fileUpload"> 选择文件 </label> <br/> <input ...

随机推荐

  1. cf#382div2

    A. 题意:字符串长度n,每次可向左向右跳k个格子.要求不能在障碍物处停留('#'),可以在空地处停留(' . ').给出字符串,从G开始,问能不能到达T. 分析:直接从G处开始向两边搜,如果能到T则 ...

  2. android 中调用接口发送短信

    android中可以通过两种方式发送短信 第一:调用系统短信接口直接发送短信:主要代码如下: //直接调用短信接口发短信 SmsManager smsManager = SmsManager.getD ...

  3. Windows 2008 R2+iis7.5环境下Discuz!X3论坛伪静态设置方法

    2008R2不是那么的普及,加上X3版新出不久,所以伪静态的设置教程比较少,今天搞出来了,其实很简单,那么下面给大家简要说明一下.因为iis7.5集成了url重写,那就就方便多了,首先安装好你的dz论 ...

  4. Mvc 提交表单的4种方法全程详解

    一,MVC  HtmlHelper方法 Html.BeginForm(actionName,controllerName,method,htmlAttributes){} BeginRouteForm ...

  5. 复制物料(参考的MMCC想法)

    MMCC这个事务码没用过,也是才听到的,都是业务搞起来的...然后感觉这个东西有点意思,就搞搞咯 网上找的一篇文章,自己修改的.改了默认收货工厂为创建时的工厂,因为这边一直报收货工厂必输...不管是不 ...

  6. Rank() 、DENSE_RANK()、NTILE(n)的用法-转

    Rank() over()/DENSE_RANK()  over()的用法 1.Rank() over()/DENSE_RANK()  over() 这两个函数与ROW_NUMBER()函数类似,因为 ...

  7. linux与php时间函数有关的错误解决

    最近在程序里写了不少获取时间或时间戳的函数date() strtotime()等,但是把程序拿到linux上运行却爆出这些函数的错误,具体原因是因为linux本身的时间设置以及php的时区问题. 先确 ...

  8. Python学习06——列表的操作(2)

    笨办法学Python第39节 之前用的第三版的书,昨天发现内容不对,八块腹肌又给我下了第四版,这次的内容才对上.本节的代码如下: ten_things = "Apples Oranges C ...

  9. Linux 动态链接库

    如何使用动态链接库 Linux下打开使用动态链接库需要三步(实际上和windows下基本一样):1.加载动态链接库,通过调用库函数dlopen()获得链接库的句柄,对应于windows下的 AfxLo ...

  10. mysql使用

    1.以查询结果建表 create table newTableName select column1 [newName1] [, column2 [newName2], .. , columnn [n ...