-->

blueimp jQuery的文件上传多实例(blueimp jQuery File Upload

2019-10-19 03:26发布

我想实现在ASP.Net网站blueimp ajaxfile上传

Blueimp JQuery的文件上传

我能够从定制一些CSS由于空间的限制除了成功实现上传。

现在我的实际需要,是落实这个相同的asp.net页面上此控件的多个实例。

如果有一个人曾试图实施Blueimp JQuery的文件上传的多个实例ASP.Net同一页面上,请帮我在这个问题上。

下面是代码的主要部分,我使用添加的控制页面

<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(); ....... 
  }); 
});

请提供您的建议。

Answer 1:

这是由blueimp自己回答。 看看这里: https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Upload-Widgets-on-the-same-page

所以,你需要为每个上传和单独的模板,你可以在初始化的引用传递的形式。

1给每个形式的同一类,例如“文件上传”

2初始化它们全部用

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

3个独立的模板,可以在形式属性进行传递。

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


Answer 2:

这是对我工作:

创建一个ID“文件上传” 1个实例(这是输入元素的id)。 第二个实例应使用不同的ID(例如fileupload2)。 也改变了二审div的“进步”号(如progress2)一切可能是2个实例之间相同。 使用API​​的文件上传(一审),因为通常没有(如:$( '#文件上传')文件上传({网址:网址,数据类型: 'JSON',做到:........});

然后绑定二审的第一个实例的变化(选择的文件将会通过实际一审被上传)。 你可以像下面这样做:

$('#fileupload2').bind('change', function (e) {
$('#fileupload').fileupload('add', {files: $('#fileupload2')[0].files })                                                                                                             });


文章来源: blueimp jQuery File Upload Multiple Instance