最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

jQuery File Upload演示与下载

来源:http://www.erdangjiade.com/ 二当家的 2015-08-23 14:43浏览(1793)

本文将演示四种不同的上传方法:基本Basic 基本扩展Basic Plus Basic Plus UI AngularJS,支持文件多个文件上传,拖放和上传进度,支持跨域、分块和可恢复的文件上传。

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

jQuery File Upload演示与下载
分类:PHP > 上传 难易:中级
查看演示 下载资源: 136

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

引入fileupload相关组件

<link rel="stylesheet" href="css/jquery.fileupload.css">
<link rel="stylesheet" href="css/jquery.fileupload-ui.css">
<script src="js/jquery.fileupload.js"></script>

上传表单

<form id="fileupload" action="http://www.erdangjiade.com/" method="POST" enctype="multipart/form-data">
    <!-- Redirect browsers with JavaScript disabled to the origin page -->
    <noscript><input type="hidden" name="redirect" value="https://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>选择文件..</span>
                <input type="file" name="files[]" multiple>
            </span>
            <button type="submit" class="btn btn-primary start">
                <i class="glyphicon glyphicon-upload"></i>
                <span>开始上传</span>
            </button>
            <button type="reset" class="btn btn-warning cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
                <span>取消上传</span>
            </button>
            <button type="button" class="btn btn-danger delete">
                <i class="glyphicon glyphicon-trash"></i>
                <span>删除</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"> </div>
        </div>
    </div>
</form>
标签: 上传uploadfile
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/440.html
评论5
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 4楼
    12-30 12:12
    qqlixiangabc
    不错啊 学习啦。。。。。。。
  • 头像 3楼
    12-18 08:28
    qqlixiangabc
    特效不错啊啊。。。。。。。
  • 头像 板凳
    05-17 22:40
    默默的无恙
    厉害啊楼主,感谢分享!
  • 头像 椅子
    05-17 14:15
    hsiao
    今日排行榜类滚动源码
  • 头像 沙发
    03-13 16:59
    l417325749
    下载好麻烦
1 2