dropzone_dropzonejs - CSDN
精华内容
参与话题
  • 先看一下预览图效果,然后下边有关于Dropzone.js 的官方文档,很详细的一篇文档 官方文档:http://www.dropzonejs.com/ 安装 你可能只需要看看简单的例子(源代码)就能开始了。然后继续阅读下面的一步步的指示和...

    先看一下预览图效果,然后下边有关于 Dropzone.js 的官方文档,很详细的一篇文档

    官方文档:http://www.dropzonejs.com/

    clipboard.png

    安装


    你可能只需要看看简单的例子源代码 )就能开始了。然后继续阅读下面的一步步的指示和不同的安装方法。

    下载独立的dropzone.js文件。然后这样引入到html中:

    <script src="./path/to/dropzone.js"></script>

    Dropzone 现在激活和可用,通过window.Dropzone就可以使用了,Dropzone 不处理你的文件上传在服务器上。你必须自己实现代码接收和存储文件。有关更多信息,请参见部分服务器端实现。完成上面的操作就可以使用 Dropzone ,但是如果你想让它你上传的样式看起来像官方页面那样,你需要将下载的dropzones里面的cs发到你的文件夹中并引入。

    使用


    使用 dropzone 的典型的方式是通过创建一个表单包含与 class="dropzone"

    <form action="/file-upload" class="dropzone" id="my-awesome-dropzone">
        <input type="file" name="file" />
    </form>

    就像这样 dropzone 会通过classdropzone找到所有的表单元素,并自动将这些元素初始化,然后点击input选择文件(或拖拽)之后会根据action指定的地址上传文件。(其实就和普通的文件上传没什么区别,只不过多了个拖拽),如果你想在后端接受文件的时候用其他的name而不是上面指定的file,您可以配置dropzone的paramName的选项。如果你是使用component形式,别忘了require("dropzone");,否则是不会生效的。如果是使用form表单,完成上面的设置之后,就已经可以拖拽上传了,所以如果你不想在写一些js去控制上传中的其他东西,比如进度条、预览区域等,可以在form内加一个包含fallback类的标签,dropzone 会自己处理fallback类的标签区域,当然这是需要浏览器支持。如果浏览器不支持,那么那就将其作为普通的文件上传。这通常是这样的:

    <form action="/file-upload" class="dropzone">
      <div class="fallback">
        <input name="file" type="file" multiple />
      </div>
    </form>

    手动创建dropzones

    除了直接在form表单中添加classdropzone让其自动创建外,还可以在非表单元素上面通过实例化Dropzone类实现。

    <div id="myId" style="width: 800px; height: 300px;"></div>
    // Dropzone class:
    var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

    或如果您使用jQuery,您可以使用jQuery插件Dropzone形式:

    // jQuery
    $("div#myId").dropzone({ url: "/file/post" });

    注意:如果你不是使用一个表单元素,别忘了指定一个url选项,因为Dropzone不知道上传到那里。

    服务器端实现

    Dropzone 不提供的服务器端文件处理的代码,但是文件上传的方式是和简单的表单文件上传是相同的。比如普通的表单上传是这样:

    <form action="" method="post" enctype="multipart/form-data">
      <input type="file" name="file" />
    </form>

    使用


    有两种方式配置 dropzone:

    方法一:

    在html元素上添加dropzone 样式类,然后就不需要手动使用js去实例化了,但是你的一些配置Dropzone.options对象去配置:

    // "myAwesomeDropzone" 是那个 HTML 元素的 ID
    // 这里的id不是驼峰格式,是以`-`为分隔,如 id="my-awesome-dropzone"
    Dropzone.options.myAwesomeDropzone = {
      paramName: "file", // The name that will be used to transfer the file
      maxFilesize: 2, // MB
      accept: function(file, done) {
        if (file.name == "justinbieber.jpg") {
          done("Naha, you don't.");
        }
        else { done(); }
      }
    };

    方法二:

    最明显的方式是通过一个选择对象时实例化一个dropzone,以前面手动创建dropzones的方式。

    常用方法:

    因为我们需要使用dropzone提供的一些样式,比如预览时图片样式等,这样就算手动创建,但也需要使用到dropzone 样式类,那这样就会导致初始化两次,在控制台就会报错,这时候就需要在手动初始化之前设置如下代码:

    // Prevent Dropzone from auto discovering this element:
    Dropzone.options.myAwesomeDropzone = false;
    // This is useful when you want to create the
    // Dropzone programmatically later
    
    // Disable auto discover for all elements:
    Dropzone.autoDiscover = false;

    例子:

    <div class="dropzone" id="myDropzone">
        <div class="am-text-success dz-message">
            将文件拖拽到此处<br>或点此打开文件管理器选择文件
        </div>
    </div>
    
    <script type="text/javascript">
        Dropzone.autoDiscover = false;
        var myDropzone = new Dropzone("#myDropzone", {
            url: "/file/upload",
            addRemoveLinks: true,
            method: 'post',
            filesizeBase: 1024,
            sending: function(file, xhr, formData) {
                formData.append("filesize", file.size);
            },
            success: function (file, response, e) {
                var res = JSON.parse(response);
                if (res.error) {
                    $(file.previewTemplate).children('.dz-error-mark').css('opacity', '1')
                }
            }
        });
    </script>

    像上面这样,既能使用 dropzone 的样式,也能自己手动初始化上传。

    配置选项

    参数 描述
    url 除了form元素以外的其他元素必须指定该参数(或当form元素没有操作属性)。您还可以提供一个函数,参数为files以及必须返回url(since v3.12.0)
    method 默认为"post",必要的时候你也可以设置为"put"。 您还可以提供一个函数,参数为files以及必须返回这个method(since v3.12.0)
    parallelUploads 同时上传多少个文件。(更多信息参见队列文件上传部分)
    maxFilesize 单位 MB
    filesizeBase 默认1000。这个定义的基础是否应该使用1000或1024来计算文件大小。1000是有效的,因为1000个字节等于1千字节,1024字节= 1 Kibibyte。你可以改变为1024,如果你不在乎的有效性。
    paramName 文件上传后端接收的参数名。默认file。注意:如果你设置uploadMultiple为true,那么Dropzone会将[]附加到这个名字,也就是后端接收的是一个file[]数组。
    uploadMultiple Dropzone是否在一个请求中发送多个文件。如果它设置为true,然后fallback部分的input元素须有multiple属性。这个选项也会触发其他事件(如processingmultiple)。有关更多信息,请参见事件部分。
    headers 一个向服务器发送附加头的对象。如:headers: { "My-Awesome-Header": "header value" }
    addRemoveLinks 这将添加一个链接到每个文件,删除或取消预览文件(如果已经上传)。dictCancelUploaddictCancelUploadConfirmation and dictRemoveFile三个参数可选。
    previewsContainer 定义文件预览显示。如果为null就使用 Dropzone 默认的。可以使用一段普通的html元素或css选择器。被选择的html元素必须包含dropzone-previews样式类确保预览显示正常。
    clickable 如果为true,dropzone元素本身将是可点击的,如果false将不可被点击。此外,还可以是一段普通的html或者css选择器,表示点击该元素触发资源管理器。
    createImageThumbnails  
    maxThumbnailFilesize 单位 MB。文件名超过这个极限时,缩略图将不会生成。
    thumbnailWidth 如果为null,将使用图像的比例来计算它。
    thumbnailHeight thumbnailWidth一样。如果两者都是null,图像将不会调整。
    maxFiles 如果不为null,定义多少个文件将被处理。如果超过,事件maxfilesexceeded将被调用。相应地dropzone元素得到了类dz-max—files-reached,因此你可以提供视觉反馈。
    resize 创建调整信息时被调用的函数。file作为函数第一个参数,同时必须返回一个对象包含srcXsrcYsrcWidth 、srcHeight 和相同的 trg*。这些值将被用于ctx.drawImage()函数。
    init Dropzone初始化时调用的函数。你能在这个函数中设置事件侦听器。
    acceptedFiles accept函数默认的实现函数,用于检查文件的mime类型或扩展。这是一个逗号分隔的mime类型和文件扩展名的数组。如。image/*,application/pdf,.psd。如果Dropzone是clickable,此选项将被用作accept函数的参数输入。
    accept 一个接收filedone函数作为参数输入的函数。如果done函数调用无参数,文件会被处理。如果你在done函数中传入了参数(比如错误信息)文件将不会被上传。如果文件太大或不匹配的mime类型这个函数不会调用。
    autoProcessQueue 当设置为false,你必须自身调用myDropzone.processQueue()上传文件。有关更多信息,请参见下面有关处理队列。
    previewTemplate 一个字符串,其中包含模板用于每一个图像。改变它满足你的需求,但确保正确地提供所有元素。你可以在页面中建立这样一个容器:id="preview-template"(设置style="display: none;"),然后这样设置:previewTemplate: document.querySelector('preview-template').innerHTML
    forceFallback 默认值为false。如果为true,fallback将被强行使用。这是非常有用的测试服务器实现首要方式,确保一切如预期所想,并测试你的fallback显示如何。
    fallback 当浏览器不支持时调用的函数。默认实现显示了fallback内的input域并添加一个文本。
    为自定义的 dropzone,你也可以使用如下这些选项
    dictDefaultMessage 任何文件被拖拽进区域之前显示的信息。这通常是被一个图像,但默认为“Drop files here to upload”。
    dictFallbackMessage 如果浏览器不支持,默认消息将被替换为这个文本。默认为“Your browser does not support drag'n'drop file uploads.”。
    dictFallbackText 这将被添加在input file之前。如果你提供一个fallback元素,或者该选项为空该选项将被忽略。默认为“Please use the fallback form below to upload your files like in the olden days.”。
    dictInvalidFileType 如果文件类型不匹配时显示的错误消息。
    dictFileTooBig 当文件太大时显示。{{filesize}}` 和 {{maxFilesize}}` 将被替换。
    dictResponseError 如果服务器响应是无效的时显示的错误消息。{{statusCode}}` 将被替换为服务器端返回的状态码。
    dictCancelUpload 如果addRemoveLinks为true,文本用于取消上传链接的文字。
    dictCancelUploadConfirmation 如果addRemoveLinks为true,文本用于取消上传的文字。
    dictRemoveFile 如果addRemoveLinks为true,用于删除一个文件的文本。
    dictMaxFilesExceeded 如果设置了maxFiles,这将是超过了设置的时候的错误消息。

    你也可以覆盖所有违约事件动作选项。如果你提供的drop选项可以覆盖默认的事件处理程序。你应该熟悉代码,因为您可以轻松掌握这样的上传。如果你只是想做额外修改,比如添加一些过滤什么的,可以监听事件

    文件上传队列

    当一个文件被添加到dropzone,其status被设置到Dropzone.QUEUED(accept函数检查通过后),这意味着该文件现在在队列中。

    如果你可以选择autoProcessQueue设置为true,那么队列是立即处理,文件被删除或一个上传完成后,通过调用.processQueue(),检查有多少文件正在上传,如果它少于option.parallelUploads,.processFile将被调用。

    如果你autoProcessQueue设置为false,那么.processQueue()不会被隐式地调用。这意味着当你想上传目前队列中所有文件时你必须自己调用它。

    布局

    为每个文件生成预览HTML,设置dropzone定义的选项previewTemplate,默认为:

    <div class="dz-preview dz-file-preview">
      <div class="dz-details">
        <div class="dz-filename"><span data-dz-name></span></div>
        <div class="dz-size" data-dz-size></div>
        <img data-dz-thumbnail />
      </div>
      <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
      <div class="dz-success-mark"><span>✔</span></div>
      <div class="dz-error-mark"><span>✘</span></div>
      <div class="dz-error-message"><span data-dz-errormessage></span></div>
    </div>

    当文件在上传过程中的时候,dz-preview中的dz-processing将被显示;当文件上传之后dz-success将被显示;如果文件上传错误或没网dz-error将被显示,此时data-dz-errormessage的内容将是服务器端返回的信息。

    重写默认的模板,就可以使用配置中的previewTemplate选项。

    您可以通过file.previewElement访问文件的HTML预览,并且设置任何事件。如:

    success: function (file, response, e) {
        var res = JSON.parse(response);
        if (res.error) {
            $(file.previewTemplate).children('.dz-error-mark').css('opacity', '1')
        }
    }

    如果你想打破常规重写previewElement,可以在你想要的元素上添加data-dz-*属性:

    • data-dz-name

    • data-dz-size

    • data-dz-thumbnail (这个必须是 <img /> 元素,然后该元素的 alt 和 src 属性会被 Dropzone 自动改变为相应的值)

    • data-dz-uploadprogress (当文件处于上传过程中的时候Dropzone 将改变此元素的 style.width 的值,从 0% 到 100%)

    • data-dz-errormessage
      Dropzone将寻找这些元素,并改变默认选项和更新它的内容。

    如果你想要一些特定链接删除一个文件(而不是建于addRemoveLinks配置),您可以简单地插入元素的模板data-dz-remove属性。

    <img src="removebutton.png" alt="Click me to remove the file." data-dz-remove />

    你也不用被这些使用惯例所强迫。如果你完全覆盖所有默认事件监听器可以从头开始重建你的布局。

    如果你想让你的dropzone看起来像官方页面那样,使用安装部分提供的添加样式表和spritemaps即可。

    看到主题部分,看看如何改变Dropzone 的UI。

    官方创建了一个例子,配置几行代码,让Dropzone看起来和感觉完全和jQuery文件上传差不多。Check it out!

    Dropzone方法

    如果你想删除已添加的文件,你可以调用.removeFile(file)。这种方法也触发removedfile事件。

    下面是一个示例,文件上传完成后将自动删除:

    myDropzone.on("complete", function(file) {
      myDropzone.removeFile(file);
    });

    如果你想删除所以的文件,简单地使用.removeAllFiles()。正在上传中的文件不会被删除。如果你想取消正在上传的文件,调用.removeAllFiles(true)将取消上传。

    如果你设置了autoProcessQueuefalse,你必须调用.processQueue()实现上传。

    访问dropzone中的所有文件,使用myDropzone.files

    • 所有可接受的文件:.getAcceptedFiles()

    • 所以被拒绝的文件:.getRejectedFiles()

    • 队列中的所有文件:.getQueuedFiles()

    • 上传中的所有文件:.getUploadingFiles()
      如果不在需要一个dropzone,使用当前示例调用.disable(),这将移除该元素上的事件、文件。重新激活使用.enable()。`

    如果你不喜欢浏览器默认的confirm,您可以通过覆盖Dropzone.confirm处理它们:

    Dropzone.confirm = function(question, accepted, rejected) {
      // Ask the question, and call accepted() or rejected() accordingly.
      // CAREFUL: rejected might not be defined. Do nothing in that case.
    };

    事件


    Dropzone触发事件在处理文件时,你可以通过当前实例调用.on(eventName, callbackFunction)监听事件。

    因为听事件只能是Dropzone实例,设置你的事件侦听器,最好的地方是在init函数。

    Dropzone.options.myAwesomeDropzone = {
      init: function() {
        this.on("addedfile", function(file) { alert("Added file."); });
      }
    };

    如果你手动创建dropzones,你可以设置实例的事件监听器,就像这样:

    // This example uses jQuery so it creates the Dropzone, only when the DOM has
    // loaded.
    
    // Disabling autoDiscover, otherwise Dropzone will try to attach twice.
    Dropzone.autoDiscover = false;
    // or disable for specific dropzone:
    // Dropzone.options.myDropzone = false;
    
    $(function() {
      // Now that the DOM is fully loaded, create the dropzone, and setup the
      // event listeners
      var myDropzone = new Dropzone("#my-dropzone");
      myDropzone.on("addedfile", function(file) {
        /* Maybe display some more file information on your page */
      });
    })

    这是更复杂的,没有必要的,除非你有一个很好的理由来管理实例化Dropzones。

    Dropzone本身严重依赖事件,视觉上的展示都是通过监听去做的。这些事件监听器设置在每个Dropzone的默认配置,可以覆盖,从而取代默认的行为实现自己的事件回调。

    事件列表

    不覆盖这些配置选项,除非你知道你在做什么。
    事件 描述
    所有这些接收event作为第一个参数
    drop 用户松放文件到到dropzone
    dragstart 用户开始拖动文件到任何地方
    dragend 拖动结束
    dragenter 用户拖拽文件到Dropzone
    dragover 用户拖动一个文件经过Dropzone
    dragleave 用户拖动一个文件离开Dropzone
    所有这些接收file作为第一个参数
    addedfile 当一个文件被添加到列表中
    removedfile 从列表中删除一个文件。你可以监听该事件然后从您的服务器删除文件
    thumbnail 生成缩略图。接收dataUrl作为第二个参数
    error 发生一个错误。接收errorMessage作为第二个参数,如果错误是由于XMLHttpRequest xhr对象为第三个参数。
    processing 当一个文件被处理(因为队列不会立即处理所有文件)。这个事件在processingfile之前被触发。
    uploadprogress 每当文件上载过程变化是触发。获得progress作为第二个参数,是一个百分比(0 - 100)和bytesSent作为第三个参数,是已经发送到服务器的字节数量。当上传完成dropzone确保uploadprogress为100%并被调用一次。Warning:这个函数可以调用多次使用相同的progress
    sending 在每个文件发送是触发。file为第一个参数,xhr对象和formData对象作为第二个和第三个参数,你可以修改它们(例如添加CSRF令牌)或添加额外的数据。
    success 文件已经成功上传触发。file为第一个参数,获取服务器响应作为第二个参数。(这一事件在finished之前触发。
    complete 上传成功或错误时。
    canceled 当一个文件上传被取消时。
    maxfilesreached 文件数量接受到达maxFiles极限时
    maxfilesexceeded 每个文件被拒绝了,因为文件的数量超过了maxFiles极限时触发
       
    所有这些收到的files作为第一个参数,并且就当uploadMultipletrue时触发
    processingmultiple processing的描述。
    sendingmultiple sending的描述。
    successmultiple success的描述。
    completemultiple complete的描述。
    canceledmultiple canceled的描述。
    特殊事件
    totaluploadprogress 触发时包含参数total uploadProgress(0 - 100),totalBytestotalBytesSent。这个事件可以用来显示所有文件的整体上载进度
    reset 调用时列表中的所有文件被删除,dropzone重置为初始状态。
    queuecomplete 当队列中的所有文件上传完成时。

    主题

    如果你想对Dropzone的主题完全自定义,在大多数情况下,您可以简单地取代HTML模板预览,调整CSS,也可以创建一些额外的事件监听器。

    官方创建了一个例子,配置几行代码,让Dropzone看起来和感觉完全和jQuery文件上传差不多。Check it out!。正如您可以看到的,最大的变化就是previewTemplate。然后添加了一些额外的事件监听器来让它看起来符合自己的要求。

    然而,您可以完全从头开始实现您的UI。

    覆盖默认的事件监听器,创建您自己的自定义Dropzone,可以这样:

    // This is an example of completely disabling Dropzone's default behavior.
    // Do *not* use this unless you really know what you are doing.
    Dropzone.myDropzone.options = {
      previewTemplate: document.querySelector('#template-container').innerHTML,
      // Specifing an event as an configuration option overwrites the default
      // `addedfile` event handler.
      addedfile: function(file) {
        file.previewElement = Dropzone.createElement(this.options.previewTemplate);
        // Now attach this new element some where in your page
      },
      thumbnail: function(file, dataUrl) {
        // Display the image in your file.previewElement
      },
      uploadprogress: function(file, progress, bytesSent) {
        // Display the progress
      }
      // etc...
    };

    上面的这些代码显然缺乏实际的实现。看源代码,看看Dropzone内部的实现。

    如果你不需要任何默认Dropzone UI,只对Dropzone的事件处理程序、文件上传和拖拽功能感兴趣,那你应该使用以上选项事件处理。

    Tips

    如果你不想要默认消息提示(拖拽文件上传(或单击)),您可以在你dropzone元素内添加一个元素包含类dz-message,这样dropzone就不会为您创建的消息。


    Dropzone 或提交你设置的form内的所有隐藏的表单域信息。所以当你是使用form元素的形式的话,这是一个简单的方法来提交额外的数据,至于是get还是post取决于你formmethod。当然也可以在js配置中添加其他的参数。


    当事件绑定完成之后,Dropzone 会添加数据到file对象。如果是image的话,你可以通过file.width 和 file.height访问到图片的宽度和高度。而且file.upload对象会包含如下信息:progress (0-100), total (总字节) and bytesSent(已上传字节)。这样你可以通过这写信息自定义上传进度条等。


    如果你想给上传的文件添加额外(多个文件时会具体到每个文件),您可以注册发送事件:

    myDropzone.on("sending", function(file, xhr, formData) {
      // Will send the filesize along with the file as POST data.
      formData.append("filesize", file.size);
    });

    文件上传之后,可以通过file.previewElement访问上传后文件的预览html。例如:

    myDropzone.on("addedfile", function(file) {
      file.previewElement.addEventListener("click", function() {
        myDropzone.removeFile(file);
      });
    });

    如果你想整个的body都是一个Dropzone实例而且在某个地方显示文件预览,那你可以简单地为body实例化一个Dropzone对象,提示定义previewsContainer 选项。这个previewsContainer可以是dropzone-previewsdropzone类,以便正确显示文件预览:

    new Dropzone(document.body, {
      previewsContainer: ".dropzone-previews",
      // You probably don't want the whole body
      // to be clickable to select files
      clickable: false
    });

    可以在github wiki寻找更多的例子。

    兼容性

    本节描述Dropzone兼容浏览器和旧版本。

    浏览器支持:

    • Chrome 7+

    • Firefox 4+

    • IE 10+

    • Opera 12+ (MacOS V12版本无法使用,因为它的API有问题)

    • Safari 6+

    对于所有其他浏览器,dropzone提供一个版的文件输入回退。
    在老式浏览器中拖放是没有解决方案,毕竟它不支持嘛~~,其次dropzone的图片预览也是同样的道理。
    但是,用户使用老式浏览器还是可以上传文件滴,只是看起来和感觉起来都不是很棒。
    哎,年代已经不属于它们了。

    Version 4.0

    这不是一个更新日志。只列出兼容性问题。

    • 改变默认previewTemplate。布局做了新调整layout sectin.

    • 使用SVG代替PNG spritemap(CSS文件现在唯一需要包括的附加文件)

    Version 3.0

    这不是一个更新日志。只列出兼容性问题。

    Version 2.0

    这不是一个更新日志。只列出兼容性问题。

    从2.0版本开始,Dropzone不再依赖jQuery,如果使用了jQuery,Dropzone 通过jQuery模块的形式加载自身。
    这意味着创建Dropzones这样仍能工作:

    $("#my-dropzone").dropzone({ /* options */ });

    如果你通过普通构造函数的形式创建Dropzones,你必须通过原始HTMLElement,或者一个选择器字符串选择相应的元素,这样该版本才能运行:

    // With jQuery
    new Dropzone($("#my-dropzone").get(0));
    // Without jQuery
    new Dropzone("#my-dropzone");
    new Dropzone(document.querySelector("#my-dropzone"));

    另外一个改变就是,Dropzone不再存储实例内部元素的数据属性。为了得到一个dropzone元素这样做:

    // DEPRECATED, do not use:
    $("#my-dropzone").data("dropzone"); // won't work anymore
    // Do this now:
    Dropzone.forElement(element); // Providing a raw HTMLElement
    // or
    Dropzone.forElement("#my-dropzone"); // Providing a selector string.

     

    展开全文
  • Dropzone的使用方法

    万次阅读 多人点赞 2015-07-24 11:47:58
    DropzoneJS是一个提供文件拖拽上传...下载单独的 dropzone.js 并像下面这样在文件中引入:<script src="./path/to/dropzone.js"></script>2.用法 使用dropzone的典型方式是通过创建一个 class 属性中包含 dropzone 的fo

    DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库,
    它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制.

    1.下载单独的 dropzone.js 并像下面这样在文件中引入:

    <script src="./path/to/dropzone.js"></script>

    2.用法
    使用dropzone的典型方式是通过创建一个 class 属性中包含 dropzone 的form 表单元素

    <form action="/file-upload"
          class="dropzone"
          id="my-awesome-dropzone"></form>
    <script>
    var myDropzone = new Dropzone("div#myId", { url: "/file/post"});
    </script>

    下面是Dropzone的中文文档,我们可以下载案例
    点击查看Drozone中文文档

    案例

    $("#dropz").dropzone({
            url: "index.php", //必须填写
            method:"post",  //也可用put
            paramName:"Filedata", //默认为file
            maxFiles:10,//一次性上传的文件数量上限
            maxFilesize: 20, //MB
            acceptedFiles: ".jpg,.gif,.png", //上传的类型
            previewsContainer:"#adds", //显示的容器
            parallelUploads: 3,
            dictMaxFilesExceeded: "您最多只能上传10个文件!",
            dictResponseError: '文件上传失败!',
            dictInvalidFileType: "你不能上传该类型文件,文件类型只能是*.jpg,*.gif,*.png。",
            dictFallbackMessage:"浏览器不受支持",
            dictFileTooBig:"文件过大上传文件最大支持.",
            previewTemplate: document.querySelector('#preview-template').innerHTML,//设置显示模板
            init:function(){
                this.on("addedfile", function(file) { 
                //上传文件时触发的事件
                });
                this.on("queuecomplete",function(file) {
                    //上传完成后触发的方法
                });
                this.on("removedfile",function(file){
                    //删除文件时触发的方法
                     });
                });
            }
    
        });

    功能选项

    url:最重要的参数,指明了文件提交到哪个页面。
    method:默认为post,如果需要,可以改为put。
    paramName:相当于元素的name属性,默认为file。
    maxFilesize:最大文件大小,单位是 MB。
    maxFiles:默认为null,可以指定为一个数值,限制最多文件数量。
    addRemoveLinks:默认false。如果设为true,则会给文件添加一个删除链接。
    acceptedFiles:指明允许上传的文件类型,格式是逗号分隔的 MIME type 或者扩展名。例如:image/*,application/pdf,.psd,.obj
    uploadMultiple:指明是否允许 Dropzone 一次提交多个文件。默认为false。如果设为true,则相当于 HTML 表单添加multiple属性。
    headers:如果设定,则会作为额外的 header 信息发送到服务器。例如:{“custom-header”: “value”}
    init:一个函数,在 Dropzone 初始化的时候调用,可以用来添加自己的事件监听器。
    forceFallback:Fallback 是一种机制,当浏览器不支持此插件时,提供一个备选方案。默认为false。如果设为true,则强制 fallback。
    fallback:一个函数,如果浏览器不支持此插件则调用。
    翻译选项

    dictDefaultMessage:没有任何文件被添加的时候的提示文本。
    dictFallbackMessage:Fallback 情况下的提示文本。
    dictInvalidInputType:文件类型被拒绝时的提示文本。
    dictFileTooBig:文件大小过大时的提示文本。
    dictCancelUpload:取消上传链接的文本。
    dictCancelUploadConfirmation:取消上传确认信息的文本。
    dictRemoveFile:移除文件链接的文本。
    dictMaxFilesExceeded:超过最大文件数量的提示文本。
    常用事件

    以下事件接收 file 为第一个参数

    addedfile:添加了一个文件时发生。
    removedfile:一个文件被移除时发生。你可以监听这个事件并手动从服务器删除这个文件。
    uploadprogress:上传时按一定间隔发生这个事件。第二个参数为一个整数,表示进度,从 0 到 100。第三个参数是一个整数,表示发送到服务器的字节数。当一个上传结束时,Dropzone 保证会把进度设为 100。注意:这个函数可能被以同一个进度调用多次。
    success:文件成功上传之后发生,第二个参数为服务器响应。
    complete:当文件上传成功或失败之后发生。
    canceled:当文件在上传时被取消的时候发生。
    maxfilesreached:当文件数量达到最大时发生。
    maxfilesexceeded:当文件数量超过限制时发生。
    以下事件接收一个 file list 作为第一个参数(仅当uploadMultiple被设为true时才会发生)

    successmultiple
    completemultiple
    cancelmultiple
    特殊事件

    totaluploadprogress:第一个参数为总上传进度,第二个参数为总字节数,第三个参数为总上传字节数。

    **this.getAcceptedFiles().length 获取上传的总数
    file.previewElement.appendChild 获取file中的节点
    **

    展开全文
  • dropzone.js和css下载

    2020-07-24 23:32:34
    dropzone.js下载,我的博客有对dropzone.js使用的详细介绍
  • dropzone

    2019-01-14 18:59:17
    使用dropzone.js上传 1.先在网上下载好后,直接在页面引入 &lt;script src="./path/to/dropzone.js"&gt;&lt;/script&gt; 如果想要好看的样式,还得引入dropzone.css; 2.使用dropzone.js...

    使用dropzone.js上传

    1.先在网上下载好后,直接在页面引入

    <script src="./path/to/dropzone.js"></script>
    

    如果想要好看的样式,还得引入dropzone.css;

    2.使用dropzone.js有两种方法

    2.1 创建一个 class 属性中包含 dropzone 的form 表单元素 :

    <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
    

    2.2 程序化方式创建 dropzones (甚至不在 form 元素上) 通过初始化一个 Dropzone 类对象

     var myDropzone = new Dropzone("div#myId", { url: "/file/post"});
    

    如果使用了JQuery

    $("div#myId").dropzone({ url: "/file/post" });
    

    3.配置

    Dropzone.options.myAwesomeDropzone = {
      	paramName: "file", // The name that will be used to transfer the file
    	maxFilesize: 2, // MB
    	accept: function(file, done) {
        	if (file.name == "justinbieber.jpg") {
          		done("Naha, you don't.");
    	    }
        	else { done(); }
    	}
    };
    

    配置项:

    选项 描述
    url 必须被设置,当dropzone在 form 表单以外的元素上时[译者注:dropzone不一定要在form元素上,也可以在一个div上,这里的意思就是假如在一个div上时必须设置URL](或者form表单没有 action 属性). 你也可以提供一个被 files调用的函数 并且必须返回 url (从 v3.12.0开始)
    method 默认"post" 如有必要也可以修改成 “put” . 你也可以提供一个被 files调用的函数 并且必须返回 method (since v3.12.0)
    parallelUploads 有多少文件将上载到并行处理 (见 进行排队文件上传 部分获取更多信息)[译者注:本人在使用过程发现:当使用手动上传时,每次只能上传两个文件,这样需要多次点击才能实现所有上传,最后学习了一下 Enqueuing file uploads 里面的关于自动上传时的处理流程,设置了这里的参数时,才能一下子全部队列上传]
    maxFilesize 以MB为单位[译者注:上传文件的大小限制]
    filesizeBase 默认值为 1000. 这个选项将设置在计算文件大小时使用 1000 还是使用 1024作为基本单位. 1000 是正确的, 因为 1000 Bytes 等于 1 Kilobyte, 1024 Bytes 等于 1 Kibibyte. 如果你不在乎有效性,您可以更改这个选项为 1024 .
    paramName 设置传输文件名称参数. 默认是 file. 注意: 如果你将配置项 uploadMultiple 设置为 true, 那么 Dropzone 将在paramName设置的name的后面追加 [].
    uploadMultiple 是否 Dropzone 应该在一个请求中发送多个文件. 如果此设置为 true,然后fallbach 中 input 的元素将具有multiple属性. 此选项还会触发其他事件 (如 processingmultiple). 请参阅事件部分了解更多信息.
    headers 要向服务器发送的其他头文件的对象. 例如: headers: { “My-Awesome-Header”: “header value” }
    addRemoveLinks 在每个预览文件下面添加一个remove[删除]或者cancel取消上传文件的链接[译者注:这里的删除和取消只是从上传队列中取消了,并没有在服务器上删除]. dictCancelUpload, dictCancelUploadConfirmation 和 dictRemoveFile 这三个配置项用来自定义设置相应操作链接的显示文字.[本项设置时布尔值,true开启/false关闭]
    previewsContainer 定义文件预览显示位置, 定义为 null 时, 将会消失在Dropzone 元素中. 可以设置成一个HTML元素或者一个CSS选择器. 这个元素的class中应该包含dropzone-previews 以便正确显示预览.
    clickable 若果设置 true, dropzone 元素本身将可以点击, 如果设置 false dropzone没有地方可供点击. 否则你也可以通过一个HTML元素,一个CSS选择器(多个HTML元素)或者其他的数组.
    createImageThumbnails
    maxThumbnailFilesize 以MB为单位[译者注:也可以使用小数]. 当文件名[译者注:这问是filename,但是测试后发现应该是出错了这里应该是指文件大小]超出这里的设置, 将不会生成缩略图.
    thumbnailWidth 默认 null, 设置缩略图的缩略比[译者注:设置width,配合下面的thumbnailHeight一起使用].
    thumbnailHeight 就像 thumbnailWidth一样. 如果为空, 将不能重置尺寸.
    maxFiles 如果不为 null ,这里设置 Dropzone 最多可以处理多少文件. 如果超过这个限制, maxfilesexceeded 事件将被调用. dropzone 将通过 class 为dz-max- files-reached 反馈一些信息给你.
    resize is the function that gets called to create the resize information. It gets the file as first parameter and must return an object with srcX, srcY, srcWidth and srcHeight and the same for trg*. Those values are going to be used by ctx.drawImage()
    init Dropzone初始化时调用的函数,你可以在这个方法中设置时间监听.
    acceptedFiles accept实现检查文件的 mime 类型或扩展名, 使用逗号分隔文件类型或者扩展名列表. 例如 Eg.: image/*,application/pdf,.psd. 如果 Dropzone 是 clickable[译者注:即配置项clickable是true], 本项将被用作 accept 的参数,就和在 隐藏的 file input 一样.
    accept 使用一个 file 和一个done 函数 作为参数的函数. 如果不带参数调用 done 函数时,将处理该文件. 如果你显示一条错误信息,该文件将不会被上传. 如果文件太大或不匹配的 mime 类型,将不调用此函数.
    autoProcessQueue 当设置 false 你必须自己像这样 myDropzone.processQueue() 的调用来上传队列中的上传文件. 请参阅下面有关处理队列的详细信息.
    previewTemplate 是一个包含预览dropzone上传的每个文件的模板字符串. 更改它以满足您的需求,但请务必提供正确的所有元素. You can 在你的页面中包含
    这样的HTML容器, 并且像这样设置: previewTemplate: document.querySelector(‘preview-template’).innerHTML.
    forceFallback 默认 false. 如果设置true 将强制使用 fallback .这在测试你的服务器端实现和确保一切如你预期的一样正常工作在没有使用dropzone的情况下,防止你一些经验上的错误,同时可以给你展示fallbacks是怎样显示的 .
    fallback 这是一个方法,当浏览器不支持的时候调用. 默认实现展示 fallback input 字段 和一段文本

    若要翻译 dropzone,还可以提供这些选项:

    dictDefaultMessage 获取显示之前的任何文件被删除的消息。这通常是由图像,但默认为"Drop files here to upload"所取代
    dictFallbackMessage 如果浏览器不受支持,此文本将替换默认的消息。默认值为"Your browser does not support drag’n’drop file uploads."
    dictFallbackText 这点文本将在 file input元素选择文件前显示 . 如果你自己提供了 fallback 元素, 或者本项设置成 null 这段文本将被忽略. 默认是 "Please use the fallback form below "
    dictInvalidFileType 如果该文件与文件类型不匹配所示的错误消息.
    dictFileTooBig 当显示该文件太大。{{filesize}} 和 {{maxFilesize}} 将被替换.
    dictResponseError 如果服务器响应无效时的错误消息。{{statusCode}}将被替换的服务器状态代码
    dictCancelUpload 如果addRemoveLinks为 true,这段文本用来设置取消上载链接的文本
    dictCancelUploadConfirmation 如果addRemoveLinks为 true,这里设置的文本将用于确认取消上载时显示.
    dictRemoveFile 如果addRemoveLinks为 true,这段文本用来设置删除文件显示文本.
    dictMaxFilesExceeded 如果设置了maxFiles ,这里设置的文本将在文件超出maxfiles设置值时显示

    4.事件

    Dropzone.options.myAwesomeDropzone = {
    	init: function() {
    		this.on("addedfile", function(file) { alert("Added file."); });
    	}
    };
    

    事件参数

    参数 描述
    drop 用户把文件放到dropzone上
    dragstart 用户开始拖动文件到任何地方
    dragend 拖动结束
    dragenter 用户把一个文件拖放到dropzone上
    dragover 用户拖动一个文件在dropzone上
    dragleave 用户拖动一个文件 Dropzone 外面
    addedfile 当文件被添加到上传列表
    removedfile 任何时候都可以调用这个方法来从上传列表中删除文件. 如果你想从你的服务器上面删除这个文件就可以利用这个监听方法[译者注:一定要清楚,removefile并不会删除服务器上面的文件,你需要自己实现服务器删除代码] .
    thumbnail 当已生成缩略图。接收 dataUrl 作为第二个参数.
    error 出错时. 接受 errorMessage 作为第二个参数,并且如果错误是 XMLHttpRequest对象, 那就作为第三个参数.
    processing 当一个文件获取处理 (因为不是所有的文件会立即得到处理的队列)。以前,此事件被称为 processingfile.
    uploadprogress Gets called periodically whenever the file upload progress changes.Gets the progress parameter as second parameter which is a percentage (0-100) and the bytesSent parameter as third which is the number of the bytes that have been sent to the server.When an upload finishes dropzone ensures that uploadprogress will be called with a percentage of 100 at least once.Warning: This function can potentially be called with the same progress multiple times.
    sending 在每个文件被发送前调用. 得到 xhr 对象 和 formData 对象作为第二个和第三个参数, 所以你可以修改他们(add a CSRF token) 或者追加额外的数据.
    success 文件已经成功上传,获得服务器返回信息作为第二个参数(这个时间又被称作finished)
    complete 当上传完成,成功或者出现错误时调用.
    canceled 当取消文件上传式调用
    maxfilesreached 当文件的数量达到maxFiles限制时调用.
    maxfilesexceeded 由于文件数量达到 maxFiles 限制数量被拒绝时调用.
    processingmultiple 查看processing 描述.
    sendingmultiple 查看 sending 描述.
    successmultiple 查看 success 描述.
    completemultiple 查看 complete 描述.
    canceledmultiple 查看 canceled 描述.
    totaluploadprogress 用 uploadProgress (0-100), totalBytes 和 totalBytesSent的总数调用. 此事件可以用于显示所有文件的总体上传进度.
    reset 当列表中的所有文件都被删除,并且 dropzone 被重置为初始状态时调用.
    queuecomplete 当上传队列中的所有文件上传完成时调用.

    参考资料

    展开全文
  • Dropzone做编辑功能 这篇文章主要用来介绍 用Dropzone做上传文件的编辑功能。 “批量上传”基本是一个涉及到文档、图片之类的项目的必有功能了,现在很多插件都能轻松的去实现。我呢用的就是这一Dropzone Dropzone...

    Dropzone做编辑功能

    这篇文章主要用来介绍 用Dropzone做上传文件的编辑功能。
    “批量上传”基本是一个涉及到文档、图片之类的项目的必有功能了,现在很多插件都能轻松的去实现。我呢用的就是这一Dropzone

    Dropzone的基本用法网上一搜一大堆,这里就不哔哩哔哩了:-)

    但是对于系统来说,基本都是有添加就有编辑,文档上传也不可避免。
    下面进入正文:如何用Dropzone做 编辑 功能
    编辑功能说白了就是将已上传的文件填充到Dropzone区域中以Dropzone基本元素的形式显示出来,如图:
    Dropzone基本元素展示
    下面上代码

    var myDropzone = Dropzone.forElement('#myDropzone');//获取Dropzone元素节点
    var mockFile = { //初始化需要填充的元素
                    size: 12345,//元素大小
                    name: images[x],//元素名称
                    type: '.jpg,.png,.bmp,.jpeg'//元素类型
                };
                myDropzone.addFile(mockFile);//添加mock元素到显示区域
                myDropzone.options.thumbnail(mockFile, imgPath + images[x]);//给mock元素添加数据源
                myDropzone.options.success(mockFile);//给mock元素绘制上传成功标识
    

    至此,从服务器端获取的已上传的文件元素就展示在了Dropzone区域中
    如图:
    编辑展示元素
    (图挂了~~但是不要在意这些细节!- !)

    还没完

    虽然图片填充到了Dropzone区域中,但你真的在向服务器提交数据的时候会发现一个有趣的事情!

    myDropzone.getAcceptedFiles().length  长度判断时,其length等于当前Dropzone区域所存在
    元素的个数(不管你是否新增了元素或者删除了元素)
    
    但是
    
     1. 你在编辑时没有新增新的上传文件(编辑时没有操作Dropzone区域或者只是删除了画布上的元素)
     
     你在上传文件时会发现一个文件都没有上传到服务器,虽然Dropzone区域中存在可见的几个元素
     
     2.你在编辑时新增了新的上传文件(编辑时不管是否删除了Dropzone画布上的元素)
     
     你在上传文件时会发现Dropzone只为你上传了那个你新增加的文件,而其数量却等于Dropzone区域中
     		可见的元素总数(已有+新增)
    
    

    SO
    我的做法是
    你需要在this.on("removedfile", function (file) {//删除Dropzone画布中的元素}中执行删除服务器文件的操作,这样:在你删除了Dropzone区域中元素时,服务器的文件也会变更,而且你新增文件时新增的记录也会添加到服务器中,从而达到编辑作用

    (MD,说的都是啥啥啥麽,啥都看不懂)
    哈哈哈哈,看不懂就对了,我也不知道我在写啥,告辞!!!

    删除服务器文件代码一搜一大堆,这里就不哔哩哔哩了:-)

    展开全文
  • Dropzone的使用

    千次阅读 2019-07-31 14:01:23
    dropzone 官方网站 控件特点:轻量 没有依赖 配置方便 使用方法 直接引css js文件 <link href="css/plugins/dropzone/basic.css" rel="stylesheet"> <link href="css/plugins/dropzone/dropzone.css" ...
  • <div class="form-group">...div id="dropz" class="dropzone"></div>//这段代码是展示dropzone.js的精髓 </div> <input type="hidden" name="file_id" ng-model="file_id" id="file_id"/>
  • Dropzone 图片拖动 组件DEMO

    千次阅读 2016-04-16 12:06:12
    1.安装 npm install dropzone ,会下载一个dropzone 2.dropzone文件夹dist 下有两个文件一个dropzone.js 一个dropzone.css 将这两个文件添加到页面上 3.初始化Dropzone ,demo代码如下<!DOCTYPE html> ...
  • dropzone的使用方法

    万次阅读 2014-07-03 17:09:06
    dropzone.js 是一个开源的 JavaScript 库,提供 AJAX 异步上传功能。 安装 下载dropzone.js文件并添加到页面中即可。 启用 可以新建一个div元素,然后通过一些 JavaScript 代码启用 dropzone
  • dropzone.js 回显问题

    2018-06-28 07:47:01
    dropzone 怎么回显多张图片,dropzone 怎么回显多张图片,dropzone 怎么回显多张图片,dropzone 怎么回显多张图片,dropzone 怎么回显多张图片,dropzone 怎么回显多张图片。求大神给个代码
  • SpringMVC利用dropzone组件实现图片上传

    千次阅读 2020-02-13 20:28:33
    一、dropzone导入 01.dropzone官网下载其插件压缩包并复制项目; 02.将CSS和JS文件在HTML文件中引入; //下面src中的地址根据自己文件地址进行修改,不能之间copy,否则可能用不了!!! <link rel="stylesheet" ...
  • dropzone.Js

    千次阅读 2017-06-20 11:10:06
    dropzone.Js 的中文文档:http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/#configuration 安装 你也许只要看一下这个 简单示例 ...下载单独的 dropzone.js 并像下面这样在文件中引入: src="./p
  • 我现在实现了dropzone拖拽上传,但是怎么将我不想要的文件删除呢!求大神解答
  • dropzone就是这样一款小控件,实现拖拽上传。它不依赖与其它像jquery等JS库,而且支持多方面的定制。
  • dropzone.js文件上传工具的使用

    千次阅读 2018-06-21 12:04:48
    dropzone.js是一个可预览的上传文件工具,不依赖任何框架(如jQuery),且具有可定制化。实现文件拖拽上传,提供AJAX异步上传功能。一、下载dropzone.js下载地址:...
  • 1、后台获不到数据,原因是将uploadMultiple设置为true。默认为false,默认就可以了,原因未知 uploadMultiple: false,//是否多文件上传,需要设置为false??
  • &lt;...= \kato\DropZone::widget([ 'options' =&gt; [ 'url'=&gt; Url::to(['tyadmin/image-upload/upload']), 'paramName'=&gt;'image', 'maxFilesize' =&gt; '10', ...
  • Dropzone 添加现存图片代码

    千次阅读 2014-02-13 01:59:06
    init: function() {  var myDropzone = this;  var mockFile = { name: "myiamge.jpg", //需要显示给用户的图片名 size: 12345, //图片尺寸 type: 'image/jpeg' //图片文件类型 ...//添加mo
  • 调用dropzone的js: ![图片说明](https://img-ask.csdn.net/upload/201607/13/1468385466_942034.png) java后台接口: ![图片说明](https://img-ask.csdn.net/upload/201607/13/1468385497_806508.png) 后台参数file...
  • dropzone.js 拖拽上传文件

    千次阅读 2015-10-15 15:06:50
    主要是记录一下dropzone.js 这个js基本用法 参考网址:http://www.dropzonejs.com/ 1.所需js文件 (dropzone版本升级后可以不依赖jquery.js,但是写法大致相同)  dropzone.js jquery.js(可选) dropzone....
1 2 3 4 5 ... 20
收藏数 2,540
精华内容 1,016
关键字:

dropzone