① 怎麼使用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觸摸效果。