JavaScript 多文件上传 js 插件推荐

xautjzd · December 15, 2013 · Last by loveky replied at December 15, 2013 · 5930 hits

最近需要实现一个多文件上传的功能,并且可以对已选择的文件进行撤销,网上也找了一些,但是始终没有合适的,或者有合适的,但文档不够详细,所以没有尝试成功。不知道大家有没有比较好的可以推荐一个呢?

我参考过的:http://www.p-roy.com/fe/2013-07/24-231.htmljQuery File Upload 确实不错,能满足要求,但是感觉文档不是很有好,没尝试成功。

** jQuery File Upload ** 确实不错,能满足要求,但是感觉文档不是很有好,没尝试成功。

有啥错误?我用的时候没遇到啥问题

#1 楼 @loveky 效果没出来,js、css 都引用了

#1 楼 @loveky 不知道是不是由于我哪没引用全,我先把我的操作列出来,希望能帮忙看看是哪出问题了:

  1. 引用 js 及 css

    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/blueimp-gallery.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/jquery.fileupload.css" />
    <link rel="stylesheet" type="text/css" href="../css/jquery.fileupload-ui.css" />
    
    <script language="javascript" src="../script/jquery.1.7.2.js"></script>
    <script type="text/javascript" src="../script/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../script/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="../script/jquery.fileupload.js"></script>
    
  2. form 表单

    <form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">
        <!-- Redirect browsers with JavaScript disabled to the origin page -->
        <noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="row fileupload-buttonbar">
            <div class="col-lg-7">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>Add files...</span>
                    <input type="file" name="files[]" multiple>
                </span>
                <button type="submit" class="btn btn-primary start">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start upload</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel upload</span>
                </button>
                <button type="button" class="btn btn-danger delete">
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" class="toggle">
                <!-- The global file processing state -->
                <span class="fileupload-process"></span>
            </div>
            <!-- The global progress state -->
            <div class="col-lg-5 fileupload-progress fade">
                <!-- The global progress bar -->
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                </div>
                <!-- The extended global progress state -->
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
        <!-- The table listing the files available for upload/download -->
        <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
    </form>
    
  3. js 脚本

    <script id="template-download" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else { %}
            <td class="preview">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
            <td class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
            </td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td colspan="2"></td>
        {% } %}
        <td class="delete">
            <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                <i class="icon-trash icon-white"></i>
                <span>{%=locale.fileupload.destroy%}</span>
            </button>
            <input type="checkbox" name="delete" value="1">
        </td>
    </tr>
    {% } %}
    </script>
    

#2 楼 @xautjzd 我用了 jquery-fileupload-rails 这个 Gem

你效果没出来的话,可以看看浏览器的 console 中有没有报错信息

#4 楼 @loveky 好,thanks,我再看看

#5 楼 @xautjzd 哦,对了,还有一点,fileupload 这个 form 里跟这个插件相关的 DOM 结构不能随便改,它的 JS 绑定是依赖 DOM 结构的,我之前遇到过移动 DOM 元素然后就无法上传的情况 (而且 console 中不报错。。。)

You need to Sign in before reply, if you don't have an account, please Sign up first.