① 怎么使用js插件
一般是直接引入即可：
比如：src为该js插件存放的位置，这个路径是相对于你使用js插件的文件来说的。
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
② jquery.fileUpload.js文件上传问题
了解，fileuploader方法需要先初始化，然后才能触发上传，并不需要你手动触发change事件
你只版需
html
<form>
file:<inputtype="file"id="file"name="file">
</form>
js
$('#file').on('change',function(){
//这里可权以做校验，返回false就不会触发下面的上传插件，否则就会触发上传
if(!this.value||this.value.indexOf('.jpg')==-1){
returnfalse;
}
});
//初始化上传插件
$('#file').fileupload({
autoUpload:true,//这里为true，则选中文件后就会自动上传
url:'',
done:$.noop,
fail:$.noop
});
③ 使用jquery.form.js实现文件上传及进度条前端代码
ajax的表单提交只能提交data数据到后台，没法实现file文件的上传还有展示进度功能，这里用到form.js的插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。
需要解释下我的结构， #upload-input-file 的input标签是真实的文件上传按钮，包裹form标签后可以实现上传功能， #upload-input-btn 的button标签是展示给用户的按钮，因为需要样式的美化。上传完成生成的文件名将会显示在 .upload-file-result 里面， .progress 是进度条的位置，先让他隐藏加上 hidden 的class， .progress-bar 是进度条的主体， .progress-bar-status 是进度条的文本提醒。
去掉hidden的class，看到的效果是这样的
[图片上传失败...(image-2c700a-1548557865446)]
将上传事件绑定在file的input里面，绑定方式就随意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上传步骤 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //获取上传文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });
[图片上传失败...(image-3d6ae0-1548557865446)]
[图片上传失败...(image-9f0adf-1548557865446)]
更多用法可以 参考官网
④ 适合前端开发人员的vscode扩展插件有哪些
1，HTML snippets(Visual Studio Code HTML snippets)
这是一款前端开发者必备的扩展，它能将你从手动键入每个标签中解放出来。只需输入 div 然后按下回车，一对标签就出现了。更厉害的是，对于需要嵌套的标签，你可以直接用 ul>li>a 的格式表示，按下回车后就能看到你需要的嵌套。还有一点，这个扩展已经包括所有的 HMTL5 片段。
2，JavaScript (ES6) code snippets
几乎每个前端程序员都是 JavaScript 的使用者，为了提高编写 JS 代码的效率，这个扩展很有用，并且它还支持 .ts, .tsx 和 .jsx 文件。
扩展中有很多快捷缩写，比如想要调用 export default class ClassName{}，输入 ecl 按下空格即可。
3，CSS Peek
既然已经分别介绍了 HTML 和 JS 的助手，我们也不能落下 CSS。CSS Peek 是一个支持 .html 和 .js 文件的扩展，它能帮助开发者快速找到和查看选定类或 id 所用的样式。对于那些不喜欢来回切换文件或者分屏的开发者来说这个扩展很有用。
4，Angular/React/Vue
既然提到了代码片段，我们最好也提一下每个框架下的不同扩展。
对 AngularJS 来说，Angular Snippets(Version 8)是针对 AngularJS 8 的一款扩展，它为我们提供 Typescript 和 HTML 的代码片段。
对于 React.js 框架，ES7 React/Rex/GraphQL/React-Native snippets 是一个优秀的扩展，它使用 ES7 提供 React 和 Rex 的代码片段，用法和 Javascript snippets 类似，都是按空格键。
对 Vue.js 开发，有一个叫 Vetur 的扩展相当棒，它目前的下载量已经有将近2,000万。Vetur 的功能很强大，包括代码片段，Emmet，错误检查，格式化，调试和高亮语法等。
5，ESLint
如果你想要写出友好，易读，干净的代码，我建议你在 VSC 中安装一个 ESLint 扩展，它会帮助你持续养成好的编码习惯，比如缩进等。
6，Prettier 代码格式工具
说到漂亮整洁的代码，Prettier 听名字你就值得拥有。尤其在项目需要你和其他同事合作完成时，Prettier 会强势地将代码格式全部统一，让你再也不用和同事讨论自己的代码。
7，GitLens
VSC 是整合了 git 功能的，通过安装 GitLens 这个功能将会更强大，它能让你看到每一行代码是由谁在什么时候写的，并且快速查看代码提交详情，在团队协作中这个扩展很有用。
8，Auto import 自动导入包
Auto import 是一个自动导入包扩展。如果目前手头的项目是基于不同组件的，那么你需要做的就是给每个组件命名，剩下的事交给 Auto import 就好。
9，Path autocomplete 路径自动补全
提到了导入的问题，另一个重要的扩展就是能够智能补全导入文件路径的 Path autocomplete。使用时，输入 ./ 后你就会看到一个包含所有文件名的下拉菜单。当文件目录繁杂时，这个扩展真的是很好用，它为你省去了很多一层一层刨开目录的痛苦。
10，Bracket Pair Colorizer 括号着色器
括号着色器能让我们一眼看出当前代码块的反括号在哪里。有时候在稍微复杂的函数中，找到正确的那对代码并不是那么容易，但 Bracket Pair Colorizer 在你键入一个括号时就为这一对括号分配了自己的颜色，便于阅读。
11，Indenticator 缩进指示器
Indenticator 可以高亮显示出当前缩进的深度，深度由线和点表示，同样使代码更整洁，提高代码易读性。
12，Debugger for Chrome 调试器
放在最后的是重磅级的调试扩展 Debugger for Chrome。这个插件能让你在 VSC 里面直接调试 JS 文件，效果和 Chrome 的控制台中差不多，让你不用打开浏览器就直接打断点。 （BY三人行慕课）
⑤ html页面头载入了jquery1.11.3的版本，我使用ajaxfileupload.js插件，但是这个插件要求1.8以下的版本
1、引入AjaxFileUpload插件相关的js
<script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="<%=basePath%>resources/js/ajaxfileupload.js"></script>
备注：测试发现，ajaxfileupload对jQuery版本是有要求的，在使用中ajaxfileupload和jQuery对应的js版本要一致，不然会导致异常发生，可以从ajaxfileupload官网下载，避免版本冲突。
2、实现上传功能代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/base.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>ajax文件上传</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="validate/ajaxfileupload.css" />
<script type="text/javascript" src="validate/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="validate/ajaxfileupload.js" ></script>
<script type="text/javascript">
$(function(){
//上传图片
$("#btnUpload").click(function() {
alert(ajaxFileUpload());
});
});
function ajaxFileUpload() {
// 开始上传文件时显示一个图片
$("#wait_loading").ajaxStart(function() {
$(this).show();
// 文件上传完成将图片隐藏起来
}).ajaxComplete(function() {
$(this).hide();
});
var elementIds=["flag"]; //flag为id、name属性名
$.ajaxFileUpload({
url: 'uploadAjax.htm',
type: 'post',
secureuri: false, //一般设置为false
fileElementId: 'file', // 上传文件的id、name属性名
dataType: 'text', //返回值类型，一般设置为json、application/json
elementIds: elementIds, //传递参数到服务器
success: function(data, status){
alert(data);
},
error: function(data, status, e){
alert(e);
}
});
//return false;
}
</script>
</head>
<body>
<div id="wait_loading" style="padding: 50px 0 0 0;display:none;">
<div style="width: 103px;margin: 0 auto;"><img src="<%=path %>/images/loading.gif"/></div>
<br></br>
<div style="width: 103px;margin: 0 auto;"><span>请稍等...</span></div>
<br></br>
</div>
<input type="file" id="file" name="file"><br/>
<input type="hidden" id="flag" name="flag" value="ajax文件上传"/>
<input type="button" id="btnUpload" value="上传图片" />
</body>
</html>
⑥ 请高手给一个JS多文件上传的例子（必须兼容IE）解决追加50分。请看补充。
一、Servlet实现文件上传，需要添加第三方提供的jar包
下载地址：
1) commons-fileupload-1.2.2-bin.zip: 点击打开链接
2) commons-io-2.3-bin.zip: 点击打开链接
接着把这两个jar包放到 lib文件夹下：
二：文件上传的表单提交方式必须是POST方式，
编码类型：enctype="multipart/form-data"，默认是 application/x-www-form-urlencoded
比如：
<form action="FileUpLoad"enctype="multipart/form-data"method="post">
三、举例：
1.fileupload.jsp
<%@ page language="java" import="javautil*" pageEncoding="UTF-8"%>
<%
String path = requestgetContextPath();
String basePath = requestgetScheme()+"://"+requestgetServerName()+":"+requestgetServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'fileuploadjsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="stylescss">
-->
</head>
<body>
<!-- enctype 默认是 application/x-www-form-urlencoded -->
<form action="FileUpLoad" enctype="multipart/form-data" method="post" >
用户名：<input type="text" name="usename"> <br/>
上传文件：<input type="file" name="file1"><br/>
上传文件： <input type="file" name="file2"><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
2.实际处理文件上传的 FileUpLoad.java
package comservletfileupload;
import javaioFile;
import javaio*;
import javaioIOException;
import javaioPrintWriter;
import javautilList;
import javaxservletServletException;
import javaxservlethttpHttpServlet;
import ;
import ;
import ;
import ;
import ;
import ;
/**
*
* @author Administrator
* 文件上传
* 具体步骤：
* 1）获得磁盘文件条目工厂 DiskFileItemFactory 要导包
* 2） 利用 request 获取 真实路径 ，供临时文件存储，和 最终文件存储 ，这两个存储位置可不同，也可相同
* 3）对 DiskFileItemFactory 对象设置一些 属性
* 4）高水平的API文件上传处理 ServletFileUpload upload = new ServletFileUpload(factory);
* 目的是调用 parseRequest（request）方法 获得 FileItem 集合list ，
*
* 5）在 FileItem 对象中 获取信息， 遍历， 判断 表单提交过来的信息 是否是 普通文本信息 另做处理
* 6）
* 第一种 用第三方 提供的 itemwrite( new File(path,filename) ); 直接写到磁盘上
* 第二种 手动处理
*
*/
public class FileUpLoad extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
requestsetCharacterEncoding("utf-8"); //设置编码
//获得磁盘文件条目工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
//获取文件需要上传到的路径
String path = requestgetRealPath("/upload");
//如果没以下两行设置的话，上传大的 文件 会占用 很多内存，
//设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同
/**
* 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上，
* 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 tem 格式的
* 然后再将其真正写到 对应目录的硬盘上
*/
factorysetRepository(new File(path));
//设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
factorysetSizeThreshold(1024*1024) ;
//高水平的API文件上传处理
ServletFileUpload upload = new ServletFileUpload(factory);
try {
//可以上传多个文件
List<FileItem> list = (List<FileItem>)uploadparseRequest(request);
for(FileItem item : list)
{
//获取表单的属性名字
String name = itemgetFieldName();
//如果获取的 表单信息是普通的 文本 信息
if(itemisFormField())
{
//获取用户具体输入的字符串 ，名字起得挺好，因为表单提交过来的是 字符串类型的
String value = itemgetString() ;
requestsetAttribute(name, value);
}
//对传入的非 简单的字符串进行处理 ，比如说二进制的 图片，电影这些
else
{
/**
* 以下三步，主要获取 上传文件的名字
*/
//获取路径名
String value = itemgetName() ;
//索引到最后一个反斜杠
int start = valuelastIndexOf("\\");
//截取 上传文件的 字符串名字，加1是 去掉反斜杠，
String filename = valuesubstring(start+1);
requestsetAttribute(name, filename);
//真正写到磁盘上
//它抛出的异常 用exception 捕捉
//itemwrite( new File(path,filename) );//第三方提供的
//手动写的
OutputStream out = new FileOutputStream(new File(path,filename));
InputStream in = itemgetInputStream() ;
int length = 0 ;
byte [] buf = new byte[1024] ;
Systemoutprintln("获取上传文件的总共的容量："+itemgetSize());
// inread(buf) 每次读到的数据存放在 buf 数组中
while( (length = inread(buf) ) != -1)
{
//在 buf 数组中 取出数据 写到 （输出流）磁盘上
outwrite(buf, 0, length);
}
inclose();
outclose();
}
}
} catch (FileUploadException e) {
// TODO Auto-generated catch block
eprintStackTrace();
}
catch (Exception e) {
// TODO Auto-generated catch block
//eprintStackTrace();
}
requestgetRequestDispatcher("filedemojsp")forward(request, response);
}
}
System.out.println("获取上传文件的总共的容量："+item.getSize());
3.filedemo.jsp
<%@ page language="java" import="javautil*" pageEncoding="UTF-8"%>
<%
String path = requestgetContextPath();
String basePath = requestgetScheme()+"://"+requestgetServerName()+":"+requestgetServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'filedemojsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="stylescss">
-->
</head>
<body>
用户名：${requestScopeusename } <br/>
文件：${requestScopefile1 }<br/>
${requestScopefile2 }<br/>
<!-- 把上传的图片显示出来 -->
<img alt="go" src="upload/<%=(String)requestgetAttribute("file1")%> " />
</body>
</html>
4结果页面：
以上就是本文的全部
⑦ 前端js插件
前端js插件,具有简单使用,交互效果好,具有吸引力外观的特点，下面总结一下最常用并且最好用的js插件：
1.zDialog.js插件。是一个包含各种弹窗的前端插件。
2.ace.min.js插件，ace-element.min.js插件，是基于Bootstrap Ace模板的菜单和包含Tab页效果。
3.jquery.flot.js插件，Jquery的图表插件float。Flot是一个Jquery下图表插件，具有简单使用，交互效果，具有吸引力外观特点。目前支持 Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+ 等浏览器，是一个基于Javascript和Jquery纯客端户的脚本库。
4.jquery.easypiechart.js插件，主要是用来统计新的访问、跳出率、服务器负载、使用的RAM等，功能很强大，带有HTML5的动画效果，效果非常炫。
query.sparkline.js插件，是一款jquery的画小图插件。
5.jquery.slimscroll.js插件 ，是jQuery内的内容滚动插件，可以定义高度、宽度，还可以定义位置、滚动条大小、尺寸、颜色以及众多参数自定义。
6.jquery.ui.touch.js 插件，包含jQuery触摸效果。