@aacassandra/jquery_upload_preview 中文文档教程

Question

Upload Preview jQuery Plugin

What is that?

这个 jQuery 插件提供了一种简单的方法来在实际上传到服务器之前预览您的上传。 因此，如果您从硬盘驱动器中选择了一个图像或音频文件，它将为音频文件生成所选图像或音频播放器的实时预览。

---

How it works

要访问未上传的数据，我们可以使用 HTML5 文件阅读器 api。 这个api提供读取本地文件。 这一步非常重要，因为我们需要这些数据才能在浏览器窗口中显示它。 要获得有关文件阅读器的更多信息，您可以阅读官方文档。

---

Download

转到 assets/js/ 文件夹。

---

Installation

<强>1。 复制 jQuery & 插件：

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.uploadPreview.min.js"></script>

2. 设置您的上传表单，例如：

<div id="image-preview">
  <label for="image-upload" id="image-label">Choose File</label>
  <input type="file" name="image" id="image-upload" />
</div>

3. 根据需要随时加载插件功能，并用参数填充它：

<script type="text/javascript">
$(document).ready(function() {
  $.uploadPreview({
    input_field: "#image-upload",   // Default: .image-upload
    preview_box: "#image-preview",  // Default: .image-preview
    label_field: "#image-label",    // Default: .image-label
    label_default: "Choose File",   // Default: Choose File
    label_selected: "Change File",  // Default: Change File
    no_label: false,                // Default: false
    success_callback: null          // Default: null
  });
});
</script>

---

Customization

您可以自由自定义输入、预览和显示的 CSS 和 HTML。 标签字段。 随意更改它。 您没有必要像在第 2 步中看到的那样将所有内容放在一起。预览框可能位于页面上的其他位置，就像输入字段一样。

---

Examples

http://opoloo.github.io/jqueryuploadpreview/

---

License

The MIT License (麻省理工学院)

Copyright (c) 2013 Opolo GbR

Permission is this granted, free charge,任何获得副本的人 本软件和相关文档文件（“软件”），处理 在软件中不受限制，包括但不限于权利 使用、复制、修改、合并、发布、分发、再许可和/或出售 该软件的副本，并允许该软件是 提供这样做，但须满足以下条件：

上述版权声明和本许可声明应包含在 本软件的所有副本或重要部分。

本软件“按原样”提供，不提供任何形式的明示或保证 暗示的，包括但不限于适销性保证， 适用于特定目的和非侵权。 在任何情况下都不得 作者或版权持有人对任何索赔、损害或其他 责任，无论是在合同、侵权或其他方面的行为中，由以下原因引起， 出于或与软件或使用或其他交易有关 软件。