JavaScript圖片上傳并預(yù)覽的完整實(shí)例
更新時(shí)間：2022年01月21日 10:21:03 作者：哪?吒
上傳是個(gè)老生常談的話題了,多數(shù)情況下各位想必用的是uplodify,webUploader之類的插件,這篇文章主要給大家介紹了關(guān)于JavaScript圖片上傳并預(yù)覽的相關(guān)資料,需要的朋友可以參考下
一、前端界面是通過jqgrid展示的
jqgrid是典型的B／C架構(gòu)（瀏覽器／服務(wù)器模式），服務(wù)器端只需提供數(shù)據(jù)管理，瀏覽器只需負(fù)責(zé)數(shù)據(jù)顯示。
jqGrid是用ajax實(shí)現(xiàn)對(duì)請(qǐng)求和響應(yīng)的處理，支持局部實(shí)時(shí)刷新。
二、jqgrid特性
- 通過配置url地址數(shù)據(jù)顯示格式
- 支持行編輯，列搜索過濾
- 支持分頁(yè)
- 添加表單支持文件上傳
- 鏈?zhǔn)秸{(diào)用
三、代碼實(shí)例
1、jqgrid頁(yè)面展示
$(document).ready(function () {
$("#gridTable").jqGrid({
colNames:['標(biāo)號(hào)','班次', '第一班', '第二班', '第三班', '第四班','操作'],
colModel:[{
name:'mark',
index:'mark',
width: 100,
},{
name:'division',
index:'division',
width: 100,
},{
name:'first_class',
index:'first_class',
width: 100,
}, {
name:'second_class',
index:'second_class',
width: 100,
},{
name:'third_class',
index:'third_class',
width: 100,
}, {
name: 'fouth_class',
index: 'fouth_class',
width: 100,
}, {
name: 'operate',
index: 'operate',
width: 200,
search: false,
formatter : function(cellvalue,options,rowObject){
var id = rowObject.mark
var str = '<button class="btn-info" data-for="pictureModal">'+
'圖片'+
'</button>';
return str;
},
}
],
sortname : "mark",
sortorder : "desc",
viewrecords : true,
width: 747,
height: 355,
rowNum: 10,
datatype: 'text',
pager: "#gridPager",
onSelectRow:function(rowid){
grid_selectRow = $("#gridTable").jqGrid("getRowData",rowid);
$("#modal_picture").pictureLoading({});
},
ondblClickRow: function(rowid) {
grid_selectRow = $("#gridTable").jqGrid("getRowData",rowid);
$("#edit").trigger("click");
},
});
jf_initJqgrid();
jf_click();
function jf_initJqgrid(){
$.ajax({
url:"DivisiondefineServlet",
async:true, //是否為異步請(qǐng)求
cache:false, //是否緩存結(jié)果
type:"GET",
dataType:"json",
success : function(data){
$("#gridTable").jqGrid("clearGridData");
for(var i=0;i<=data.length;i++){
$("#gridTable").jqGrid('addRowData',i+1,data[i]);
}
}
})
}
$('[id^=jqgh_gridTable_]').css("height","20px");
function jf_click() {
$("#add").click(function () {
$("#modal-divisionAdd").divisionAdd({});
})
$("#edit").click(function () {
$("#modal-divisionEdit").divisionEdit({});
})
$("#delete").click(function () {
jf_delete();
jf_initJqgrid();
})
}
function jf_delete() {
$.ajax({
url:"DivisiondefineServlet?action=delete",
async:true, //是否為異步請(qǐng)求
cache:false, //是否緩存結(jié)果
type:"POST",
dataType:"text",
data :{
"mark1" : grid_selectRow.mark,
},
})
}
});2、模塊頁(yè)面
;(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(){
//創(chuàng)建模態(tài)窗體
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="right">'+
'<button class="close" data-dismiss="modal" aria-hidden="true" value="HTML">'+
'<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>標(biāo)號(hào)</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",
async:true, //是否為異步請(qǐng)求
cache:false, //是否緩存結(jié)果
type:"GET",
dataType:"json",
data :{
"mark" : $("#mark").val()
},
success : function(data){
$('#viewImg').attr('src', "../../../picture/" + data);
},
error:function () {
alert("error");
}
})
},
//自定義JS點(diǎn)擊事件
bindEvent : function(){
},
}
})(jQuery)3、ajax實(shí)現(xiàn)異步請(qǐng)求
function loadfile(){
var picName = $("#IronMan").val().replace("C:\fakepath\","");
$.ajax({
url:"PictureServlet",
async:true, //是否為異步請(qǐng)求
cache:false, //是否緩存結(jié)果
type:"POST",
dataType:"json",
data :{
"mark" : $("#mark").val(),
"picName":picName,
},
})
$('#viewImg').attr('src', "../../../picture/" + picName);
}
4、servlet存儲(chǔ)并在本地存儲(chǔ)圖片文件
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("創(chuàng)建新文件時(shí)出現(xiàn)了錯(cuò)誤。。。");
e.printStackTrace();
}
}
}
五、效果展示
總結(jié)
到此這篇關(guān)于JavaScript圖片上傳并預(yù)覽的文章就介紹到這了,更多相關(guān)JavaScript圖片上傳并預(yù)覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js布局實(shí)現(xiàn)單選按鈕控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
微信小程序?qū)崿F(xiàn)藍(lán)牙設(shè)備搜索及連接功能示例詳解
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)藍(lán)牙設(shè)備搜索及連接功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
Mint-UI時(shí)間組件起始時(shí)間問題及時(shí)間插件使用
這篇文章主要介紹了Mint-UI時(shí)間組件起始時(shí)間問題的解決方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
微信小程序動(dòng)態(tài)添加分享數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)態(tài)添加分享數(shù)據(jù)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了淺談JavaScript 代碼整潔之道，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-10-10
js的window.showModalDialog及window.open用法實(shí)例分析
這篇文章主要介紹了js的window.showModalDialog及window.open用法,實(shí)例分析了window.showModalDialog與window.open方法的定義、功能與使用技巧,需要的朋友可以參考下2015-01-01
JS監(jiān)控關(guān)閉瀏覽器操作的實(shí)例詳解
這篇文章主要介紹了JS監(jiān)控關(guān)閉瀏覽器操作的實(shí)例詳解的相關(guān)資料,希望通過本大家能幫助到大家，需要的朋友可以參考下2017-09-09
用js獲取當(dāng)前網(wǎng)卡的ip地址，可以是局域網(wǎng)的。不過一般本地使用的。2009-05-05
JS從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)的方法
這篇文章給大家介紹基于js如何從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)，非常實(shí)用，實(shí)現(xiàn)方案也很簡(jiǎn)單，需要的朋友可以參考下2016-06-06