jquery file upload示例

2020-3-4 08:37| 发布者: admin| 查看: 14| 评论: 0

摘要: jquery file upload是一款实用的上传文件插件，项目中刚好用到，在这里记录分享一下。一：准备相关js文件jquery file upload 下载地址：点击打开链接点击下面红圈中的按钮下载jquery.js下载地址：点击打开链接二： ...

jquery file upload是一款实用的上传文件插件，项目中刚好用到，在这里记录分享一下。

一：准备相关js文件

jquery file upload 下载地址：点击打开链接点击下面红圈中的按钮下载

jquery.js下载地址：点击打开链接

二：导入js文件

注意：js文件引入的先后顺序不可以乱

[html] view plain copy
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  
<!-- jquery file upload相关js -->  
<script src="js/jquery.ui.widget.js"></script>  
<script src="js/jquery.iframe-transport.js"></script>  
<script src="js/jquery.fileupload.js"></script>  
<script src="js/jquery.fileupload-process.js"></script>  
<script src="js/jquery.fileupload-validate.js"></script>  

三：jsp代码

[html] view plain copy
<style>  
/* input样式 */  
#uploadImg{  
display: none;  
}  
  
/* button样式 */  
#chooseFile{  
background: #93b6fc;  
}  
  
#uploadFile,#rechooseFile {  
display: none;  
background: #93b6fc;  
}  
  
#image{  
  width:200px;  
  height:200px;  
}  
  
/* 进度条样式 */  
.bar {   
 background-image: -webkit-linear-gradient(top,#5cb85c 0,#449d44 100%);   
 background-image: -o-linear-gradient(top,#5cb85c 0,#449d44 100%);   
 background-image: -webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#449d44));   
 background-image: linear-gradient(to bottom,#5cb85c 0,#449d44 100%);   
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);   
 background-repeat: repeat-x;   
 height: 20px;   
 line-height: 20px;   
 -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);   
 box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);   
 -webkit-transition: width .6s ease;   
 -o-transition: width .6s ease;   
 transition: width .6s ease;   
}  
#progress {   
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);   
 background-repeat: repeat-x;   
 height: 20px;   
 width: 0%;   
 margin-bottom: 20px;   
 overflow: hidden;   
 background-color: #f5f5f5;   
 border-radius: 4px;   
 -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);   
 box-shadow: inset 0 1px 2px rgba(0,0,0,.1);   
 margin-top: 20px;   
}  
</style>  
<body>  
    <div class="jquery-fileupload">  
        <div class="">  
            <input id="uploadImg" type="file" name="uploadImg" multiple style="display: none" />   
                <button id="chooseFile">+选择文件</button>   
                <button id="uploadFile">~开始上传</button>  
                <button id="rechooseFile">+重新选择</button>  
        </div>  
        <div>  
            <img id="image" src="">  
        </div>  
        <div id="progress"&

收藏邀请

上一篇：jQuery File Upload的使用下一篇：Bootstrap之fileinput文件上传控件

发表评论

		自动登录	找回密码
密码			立即注册

jquery file upload示例

最新评论

相关分类