jqUploader — jquery文件上传插件

发布于，归属于jquery插件。 只剩下板凳啦！ 共有929人围观    

JQ文件上传插件

 点此下载

推荐指数：

这个插件强烈推荐！！jqUploader是一个基于flash的文件上传插件，可直接用于代替html中的file input标签。

  1. 基于flash技术，而不是使用js
  2. 带有进步条，可以显示上传进度
  3. 实现的Ajax无刷新文件上传
  4. 前端验证文件大小和文件类型
  5. 使用flash后安全性有所提高：如果你在配置文件中修改了允许上传的文件类型，则点击“浏览”的时候，被限制的文件上传类型将不会在选择文件对话框中出现，这样极大的提高了程序稳定性，而并不需要选择文件后再去判断类型。

看到如此多的特性，是不是心动了，那赶紧下载体验下吧

接下来详细讲解下其使用方法：

建立如下html结构：

  1. <form enctype="multipart/form-data" action="flash_upload.php" method="POST" class="a_form">
  2.     <fieldset>
  3.     <legend>Your name</legend>
  4.     <ol>
  5.       <li>
  6.         <label for="your_email">Your email:</label>
  7.         <input name="your_email" id="your_email" type="text" value="john@doe.com" />
  8.       </li>
  9.     </ol>
  10.     </fieldset>
  11.     <fieldset>
  12.     <legend>Your picture</legend>
  13.     <ol>
  14.       <li id="example1">
  15.         <label for="example1_field">Choose a file to upload: </label>
  16.         <input name="MAX_FILE_SIZE" value="1048576" type="hidden" />
  17.         <input name="myFile"  id="example1_field"  type="file" />
  18.       </li>
  19.     </ol>
  20.     </fieldset>
  21.     <input type="submit" name="submit" value="Send" />
  22.   </form>
    1. <form enctype="multipart/form-data" action="flash_upload.php" method="POST" class="a_form">

    中enctype=”multipart/form-data”这属性必不可少！

    1. <input name="MAX_FILE_SIZE" value="1048576" type="hidden" />

    这个隐藏域主要用于限制文件的大小。

    1. <input name="myFile"  id="example1_field"  type="file" />

    这是最为关键的文件域，必不可少！

接下来看下初始化的过程：

  1. $("#example1").jqUploader({
  2.             background:           "FFFFDF",
  3.             barColor:             "FFDD00",
  4.             allowedExt:           "*.avi; *.jpg; *.jpeg; *.png",
  5.             allowedExtDescr:      "what you want",
  6.             params:               {quality:'low'},
  7.             validFileMessage:     'Thanks, now hit Upload!',
  8.             endMessage:           'and don\'t you come back ;)',
  9.             hideSubmit:           false,
  10.             endHtml:             '&lt;strong style="text-decoration:underline"&gt;Upload finished!
  11.       (the filename is now stored in the form as an hidden input field)&lt;/strong&gt;'
  12.     });
  1. background背景颜色，颜色前不带#
  2. barColor进度条，颜色前不带#
  3. allowedExt所允许的文件类型
  4. params参数
  5. validFileMessage当文件合法时候出现的提示信息
  6. endMessage当文件传输结束时候出现的提示信息
  7. hideSubmit是否隐藏提交按钮
  8. endHtml整个过程结束出现的消息
  9. afterScript当文件上传成功时候，是否指向其他页面

至于后台如何保存，在此不再累述，可参考示例。示例也没有保存，但是有读出file数组的内容，接下来的事就是水到渠成了。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

只剩下板凳了！

  1. yanglu

    我想问下，在php环境下，怎么把后台上传后处理的文件地址返回到前台去？看过那个源码，它只能返回原文件的文件名。

同类