jquery file upload demo java_jquery file upload示例

原文链接：http://blog.csdn.net/qq_37936542/article/details/79258158

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

一：准备相关js文件

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

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

二：导入js文件

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

三：jsp代码

/* 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;

}

+选择文件

~开始上传

+重新选择