JavaScript圖片上傳并預(yù)覽的完整實(shí)例
一、前端界面是通過jqgrid展示的
jqgrid是典型的B/C架構(gòu)(瀏覽器/服務(wù)器模式),服務(wù)器端只需提供數(shù)據(jù)管理,瀏覽器只需負(fù)責(zé)數(shù)據(jù)顯示。
jqGrid是用ajax實(shí)現(xiàn)對請求和響應(yīng)的處理,支持局部實(shí)時刷新。
二、jqgrid特性
- 通過配置url地址數(shù)據(jù)顯示格式
- 支持行編輯,列搜索過濾
- 支持分頁
- 添加表單支持文件上傳
- 鏈?zhǔn)秸{(diào)用
三、代碼實(shí)例
1、jqgrid頁面展示
$(document).ready(function () { $("#gridTable").jqGrid({ colNames:['標(biā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, //是否為異步請求 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, //是否為異步請求 cache:false, //是否緩存結(jié)果 type:"POST", dataType:"text", data :{ "mark1" : grid_selectRow.mark, }, }) } });
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(){ //創(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)號</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, //是否為異步請求 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)異步請求
function loadfile(){ var picName = $("#IronMan").val().replace("C:\fakepath\",""); $.ajax({ url:"PictureServlet", async:true, //是否為異步請求 cache:false, //是否緩存結(jié)果 type:"POST", dataType:"json", 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("創(chuàng)建新文件時出現(xiàn)了錯誤。。。"); e.printStackTrace(); } } }
五、效果展示
總結(jié)
到此這篇關(guān)于JavaScript圖片上傳并預(yù)覽的文章就介紹到這了,更多相關(guān)JavaScript圖片上傳并預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序?qū)崿F(xiàn)藍(lán)牙設(shè)備搜索及連接功能示例詳解
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)藍(lán)牙設(shè)備搜索及連接功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06js的window.showModalDialog及window.open用法實(shí)例分析
這篇文章主要介紹了js的window.showModalDialog及window.open用法,實(shí)例分析了window.showModalDialog與window.open方法的定義、功能與使用技巧,需要的朋友可以參考下2015-01-01JS監(jiān)控關(guān)閉瀏覽器操作的實(shí)例詳解
這篇文章主要介紹了JS監(jiān)控關(guān)閉瀏覽器操作的實(shí)例詳解的相關(guān)資料,希望通過本大家能幫助到大家,需要的朋友可以參考下2017-09-09JS從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)的方法
這篇文章給大家介紹基于js如何從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù),非常實(shí)用,實(shí)現(xiàn)方案也很簡單,需要的朋友可以參考下2016-06-06