JavaScript圖片上傳並預覽的完整例項
阿新 • • 發佈：2022-01-23
目錄
- 一、前端介面是通過jqgrid展示的
- 二、jqgrid特性
- 三、程式碼例項
- 1、jqgrid頁面展示
- 2、模組頁面
- 3、ajax實現非同步請求
- 五、效果展示
- 總結
一、前端介面是通過jqgrid展示的
jqgrid是典型的B／C架構（瀏覽器／伺服器模式），伺服器端只需提供資料管理，瀏覽器只需負責資料顯示。
jqGrid是用ajax實現對請求和響應的處理，支援區域性實時重新整理。
二、jqgrid特性
- 通過配置url地址資料顯示格式
- 支援行編輯，列搜尋過濾
- 支援分頁
- 新增表單支援檔案上傳
- 鏈式呼叫
三、程式碼例項
1、jqgrid頁面展示
$(document).ready(function () {
$("#gridTable").jqGrid({
colNames:['標號','班次','第一班','第二班','第三班','第四班','操作'],colModel:[{
name:'mark',index:'mark',width: 100,},{
name:'division',index:'division',{
name:'first_class' 2、模組頁面
;(function($){
$.fn.pictureLoading = function(options){
var el = this;
var opts = {
}
var param = $.extend(opts,options);
var or = new Order(el,param);
}
var Order = function(el,param){
this.el=el;
this.param=param;
this.orderContent();
this.bindEvent();
this.orderSetValue();
}
Order.prototype = {
orderContent : function(){
//建立模態窗體
this.el.addClass("modal").attr("tabindex","-1").attr("data-backdrop","static");
html= '<div class="modal-dialog">'+
'<div class="modal-content" style="width: 450px">'+
'<div class="modal-header" style="border-bottom:0px;">'+
'<div class="row col-sm-12">'+
'<div class="col-sm-8" align="left">'+
'<span></span>'+
'</div>'+
'<div class="col-sm-4" align="riwww.cppcns.comght">'+
'<button class="close" data-dismiss="modal" aria-hidden="true" value="HTML">'+
'RVVZFQxrTl<span class="blue"></span>'+
'</button>'+
'</div>'+
'</div>'+
'</div>'+
'<div class="modal-body" style="height:350px;top: -30px">'+
'<form id="form" action="PictureServlet" method="post">'+
'<span>標號</span><input id="mark" name="mark" disabled/>'+
'<span id="FPicName">'+
'<input id="IronMan" type="file" size="45" name="IronMan" class="avatar input" nchange="loadfile(); "style="display:none";/>'+
'<img id="viewImg" class="viewImg" src="picture/html.jpg" style="height: 300px;width: 400px;" ="loadPic();" >'+
'</span>'+
'</form>'+
'</div>'+
'<div class="modal-footer">'+
'<div align="right">'+
'<div class="btn-group">'+
'<button id="btnSubCancel" class="btn btn-default btn-sm" data-dismiss="modal">'+
'<span>退出</span>'+
'</button>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'</div>';
this.el.html("");
this.el.append(html);
this.el.modal("show");
},orderSetValue : function(){
$("#mark").val(grid_selectRow.mark);
$.ajax({
url:"PictureServlet",//是否為非同步請求
cache:false,//是否快取結果
type:"GET",dataType:"json",data :{
"mark" : $("#mark").val()
},success : function(data){
$('#viewImg').attr('src',"../../../picture/" + data);
},error:function () {
alert("error");
}
})
},//自定義JS點選事件
bindEvent : function(){
},}
})()
3、ajax實現非同步請求
function loadfile(){
var picName = $("#IronMan").val().replace("C:\fakepath\","");
$.ajax({
url:"PictureServlet",//是否為非同步請求
cache:false,//是否快取結果
type:"POST",data :{
"mark" : $("#mark").val(),"picName":picName,})
$('#viewImg').attr('src',"../../../picture/" + picName);
}
4、servlet儲存並在本地儲存圖片檔案
protected void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException {
System.out.println("servlet");
response.setContentType("text/html");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
int mark = Integer.parseInt(request.getParameter("mark"));
String picName = request.getParameter("picName");
service.insertPic(mark,picName);
String directory = "E:/GDKJ/others/imooc_pic";
File file = new File(directory,picName);
if(file.exists()) {
System.out.println(file.getAbsolutePath());
System.out.println(file.getName());
System.out.println(file.length());
} else {
file.getParentFile().mkdirs();
try {
file.createNewFile();
} catch (IOException e) {
System.out.println("建立新檔案時出現了錯誤。。。");
e.printStackTrace();
}
}
}
五、效果展示
總結
到此這篇關於圖片上傳並預覽的文章就介紹到這了,更多相關Script圖片上傳並預覽內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！