用JavaScript实现图片上传并预览

jqGrid是用ajax实现对请求和响应的处理，支持局部实时刷新。

二、jqgrid特性

---

1、通过配置url地址数据显示格式

2、支持行编辑，列搜索过滤

3、支持分页

4、添加表单支持文件上传

5、链式调用

三、代码实例

---

1、jqgrid页面展示

$(document).ready(function () {

$(“#gridTable”).jqGrid({

colNames:[‘标号’,‘班次’, ‘第一班’, ‘第二班’, ‘第三班’, ‘第四班’,‘操作’],

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 = ‘’+

‘图片’+

‘’;

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, //是否缓存结果

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, //是否缓存结果

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(){

//创建模态窗体

this.el.addClass(“modal”).attr(“tabindex”,“-1”).attr(“data-backdrop”,“static”);

html= ‘

’+

‘

’+

‘

’+

‘

’+

‘

’+

‘’+

‘’+

‘

’+

‘’+

‘×’+

‘’+

‘’+

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

96道前端面试题：

• 

常用算法面试题：

• 

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

'+

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

96道前端面试题：

• [外链图片转存中…(img-rQIXxmWs-1726069908047)]

常用算法面试题：

• [外链图片转存中…(img-Y6s4aCEH-1726069908048)]

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

•