blueimp jQuery文件上传多个实例 [英] blueimp jQuery File Upload Multiple Instance

问题描述

我正在尝试在ASP.Net网站中实现blueimp ajaxfile上传器

I am trying to implement blueimp ajaxfile uploader in ASP.Net website

Blueimp JQuery文件上传

除了由于空间限制而自定义一些CSS之外，我还能够成功实现上载器.

I was able to implement the uploader successfully apart from customizing some css due to space constraint.

现在，我的实际要求是在同一asp.net页上实现此控件的多个实例.

Now my actual requirement is to implement multiple instances of this control on this same asp.net page.

如果有人试图在同一页面上实现ASP.Net的Blueimp JQuery File Upload的多个实例，请帮助我解决这个问题.

If some one had tried to implement multiple instance of Blueimp JQuery File Upload for ASP.Net on same page please help me on this issue.

下面是我用来在页面中添加控件的代码的主要部分

Below is main portion of code I am using to add the control in the page

<div id="fileupload">
<form action="Handler.ashx" method="post" enctype="multipart/form-data">
<div class="fileupload-buttonbar">
    <label class="fileinput-button">
        <span>Add files...</span>
        <input id="file" type="file" name="files[]" multiple />
        <input id="hdnFundID" name="hdnFundID" value="1236" type="hidden" />
    </label>
    <button type="submit" class="start">
        Start upload</button>
    <button type="reset" class="cancel">
        Cancel upload</button>
    <button type="button" class="delete">
        Delete files</button>
</div>
</form>
<div class="fileupload-content">
    <table class="files">
    </table>
    <div class="fileupload-progressbar">
    </div>
</div>

<script id="template-upload" type="text/x-jquery-tmpl">
<tr class="template-upload{{if error}} ui-state-error{{/if}}">
    <td class="preview"></td>
    <td class="name">${name}</td>
    <td class="size">${sizef}</td>
    {{if error}}
        <td class="error" colspan="2">Error:
            {{if error === 'maxFileSize'}}File is too big
            {{else error === 'minFileSize'}}File is too small
            {{else error === 'acceptFileTypes'}}Filetype not allowed
            {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
            {{else}}${error}
            {{/if}}
        </td>
    {{else}}
        <td class="progress"><div></div></td>
        <td class="start"><button>Start</button></td>
    {{/if}}
    <td class="cancel"><button>Cancel</button></td>
</tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
<tr class="template-download{{if error}} ui-state-error{{/if}}">
    {{if error}}
        <td></td>
        <td class="name">${namefdsa}</td>
        <td class="size">${sizef}</td>
        <td class="error" colspan="2">Error:
            {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
            {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
            {{else error === 3}}File was only partially uploaded
            {{else error === 4}}No File was uploaded
            {{else error === 5}}Missing a temporary folder
            {{else error === 6}}Failed to write file to disk
            {{else error === 7}}File upload stopped by extension
            {{else error === 'maxFileSize'}}File is too big
            {{else error === 'minFileSize'}}File is too small
            {{else error === 'acceptFileTypes'}}Filetype not allowed
            {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
            {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
            {{else error === 'emptyResult'}}Empty file upload result
            {{else}}${error}
            {{/if}}
        </td>
    {{else}}
        <td class="preview">
            {{if Thumbnail_url}}
                <a href="${url}" target="_blank"><img src="${Thumbnail_url}"></a>
            {{/if}}
        </td>
        <td class="name">
            <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${Name}</a>
        </td>
        <td class="size">${Length}</td>
        <td colspan="2"></td>
    {{/if}}
    <td class="delete">
        <button data-type="${delete_type}" data-url="${delete_url}">Delete</button>
    </td>
</tr>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
<script src="example/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="example/jquery.fileupload.js" type="text/javascript"></script>
<script src="example/jquery.fileupload-ui.js" type="text/javascript"></script>
<script src="example/application.js" type="text/javascript"></script>

application.js (摘自作者评论)

$(function () 
{ 
  'use strict'; 
  // Initialize the jQuery File Upload widget: 
  $('#fileupload').fileupload({ }); 
  $('#fileupload').bind('fileuploaddone', function (e, data) { ...... }); 
  // Open download dialogs via iframes, 
  // to prevent aborting current uploads: 
  $('#fileupload .files a:not([target^=_blank])').live('click', function (e) 
  { 
    e.preventDefault(); ....... 
  }); 
});

请提供您的建议.

推荐答案

blueimp自己回答了这个问题.在这里看看: https://github .com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Upload-Widgets-on-the-same-samepage

This was answered by blueimp himself. Have a look here: https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Upload-Widgets-on-the-same-page

因此，您需要为每个上载使用一个表单，并需要单独的模板，以便在初始化时传递引用.

So, you need a form for each upload and separate templates which you can pass references on initialization.

1 给每个表格相同的类，例如'fileupload'

1 give each form the same class, e.g. 'fileupload'

2 全部初始化

$('.fileupload').each(function () {
  $(this).fileupload({
      dropZone: $(this)
  })
  .bind('fileuploaddone', function(){})
  .bind('fileuploadfail', function(){})
});

3 可以将单个模板作为属性传递到表单上.

3 individual templates can be passed on the forms as attributes.

<form ...
  data-upload-template-id="template-upload-1"
  data-download-template-id="template-download-1">
</form>

这篇关于blueimp jQuery文件上传多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！