android短视频开发，图片上传时先预览效果再完成上传

android短视频开发，图片上传时先预览效果再完成上传实现的相关代码

一、前端界面是通过jqgrid展示的

jqgrid是典型的B／C架构（浏览器／服务器模式），服务器端只需提供数据管理，浏览器只需负责数据显示。

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

二、jqgrid特性

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

支持行编辑，列搜索过滤

支持分页

添加表单支持文件上传

链式调用

三、代码实例

1、jqgrid页面展示

$(document).ready(function () {<br>    $("#gridTable").jqGrid({<br>        colNames:['标号','班次', '第一班', '第二班', '第三班', '第四班','操作'],<br>        colModel:[{<br>                name:'mark',<br>                index:'mark',<br>                width: 100,<br>            },{<br>                name:'division',<br>                index:'division',<br>                width: 100,<br>            },{<br>                name:'first_class',<br>                index:'first_class',<br>                width: 100,<br>            }, {<br>                name:'second_class',<br>                index:'second_class',<br>                width: 100,<br>            },{<br>                name:'third_class',<br>                index:'third_class',<br>                width: 100,<br>            }, {<br>                name: 'fouth_class',<br>                index: 'fouth_class',<br>                width: 100,<br>            }, {<br>                name: 'operate',<br>                index: 'operate',<br>                width: 200,<br>                search: false,<br>                formatter : function(cellvalue,options,rowObject){<br>                    var id = rowObject.mark<br>                    var str =   '<button class="btn-info" data-for="pictureModal">'+<br>                        '图片'+<br>                        '</button>';<br>                    return str;<br>                },<br>            }<br>        ],<br>        sortname : "mark",<br>        sortorder : "desc",<br>        viewrecords : true,<br>        width: 747,<br>        height: 355,<br>        rowNum: 10,<br>        datatype: 'text',<br>        pager: "#gridPager",<br>        onSelectRow:function(rowid){<br>            grid_selectRow = $("#gridTable").jqGrid("getRowData",rowid);<br>            $("#modal_picture").pictureLoading({});<br>        },<br>        ondblClickRow: function(rowid) {<br>            grid_selectRow = $("#gridTable").jqGrid("getRowData",rowid);<br>            $("#edit").trigger("click");<br>        },<br>    });<br> <br>    jf_initJqgrid();<br>    jf_click();<br> <br>    function jf_initJqgrid(){<br>        $.ajax({<br>            url:"DivisiondefineServlet",<br>            async:true,   //是否为异步请求<br>            cache:false,  //是否缓存结果<br>            type:"GET",<br>            dataType:"json",<br>            success : function(data){<br>                $("#gridTable").jqGrid("clearGridData");<br>                for(var i=0;i<=data.length;i++){<br>                    $("#gridTable").jqGrid('addRowData',i+1,data[i]);<br>                }<br>            }<br>        })<br>    }<br> <br>    $('[id^=jqgh_gridTable_]').css("height","20px");<br> <br>    function jf_click() {<br>        $("#add").click(function () {<br>            $("#modal-divisionAdd").divisionAdd({});<br>        })<br>        $("#edit").click(function () {<br>            $("#modal-divisionEdit").divisionEdit({});<br>        })<br>        $("#delete").click(function () {<br>            jf_delete();<br>            jf_initJqgrid();<br>        })<br>    }<br> <br>    function jf_delete() {<br>        $.ajax({<br>            url:"DivisiondefineServlet?action=delete",<br>            async:true,   //是否为异步请求<br>            cache:false,  //是否缓存结果<br>            type:"POST",<br>            dataType:"text",<br>            data :{<br>                "mark1" : grid_selectRow.mark,<br>            },<br>        })<br>    }<br>});

2、模块页面

;(function($){<br>    $.fn.pictureLoading = function(options){<br>        var el = this;<br>        var opts = {<br>        }<br>        var param = $.extend(opts,options);<br>        var or = new Order(el, param);<br>    }<br> <br>    var Order = function(el,param){<br>        this.el=el;<br>        this.param=param;<br>        this.orderContent();<br>        this.bindEvent();<br>        this.orderSetValue();<br>    }<br> <br>    Order.prototype = {<br>        orderContent : function(){<br>            //创建模态窗体<br>            this.el.addClass("modal").attr("tabindex","-1").attr("data-backdrop","static");<br>            html=   '<div class="modal-dialog">'+<br>                        '<div class="modal-content" style="width: 450px">'+<br>                            '<div class="modal-header" style="border-bottom:0px;">'+<br>                                '<div class="row col-sm-12">'+<br>                                    '<div class="col-sm-8" align="left">'+<br>                                        '<span></span>'+<br>                                    '</div>'+<br>                                    '<div class="col-sm-4" align="right">'+<br>                                        '<button class="close" data-dismiss="modal" aria-hidden="true" value="HTML">'+<br>                                        '<span class="blue">×</span>'+<br>                                        '</button>'+<br>                                    '</div>'+<br>                                '</div>'+<br>                            '</div>'+<br>                            '<div class="modal-body" style="height:350px;top: -30px">'+<br>                                '<form  id="form"  action="PictureServlet" method="post">'+<br>                                    '<span>标号</span><input id="mark" name="mark" disabled/>'+<br>                                    '<span id="FPicName">'+<br>                                    '<input id="IronMan" type="file" size="45" name="IronMan" class="avatar input" οnchange="loadfile(); "style="display:none";/>'+<br>                                    '<img id="viewImg" class="viewImg" src="picture/html.jpg" style="height: 300px;width: 400px;" ="loadPic();" >'+<br>                                    '</span>'+<br>                                '</form>'+<br>                            '</div>'+<br>                            '<div class="modal-footer">'+<br>                                '<div align="right">'+<br>                                    '<div class="btn-group">'+<br>                                        '<button id="btnSubCancel" class="btn btn-default btn-sm" data-dismiss="modal">'+<br>                                        '<span>退出</span>'+<br>                                        '</button>'+<br>                                    '</div>'+<br>                                '</div>'+<br>                            '</div>'+<br>                        '</div>'+<br>                    '</div>';<br>            this.el.html("");<br>            this.el.append(html);<br>            this.el.modal("show");<br>        },<br>        orderSetValue : function(){<br>            $("#mark").val(grid_selectRow.mark);<br>            $.ajax({<br>                url:"PictureServlet",<br>                async:true,   //是否为异步请求<br>                cache:false,  //是否缓存结果<br>                type:"GET",<br>                dataType:"json",<br>                data :{<br>                    "mark" : $("#mark").val()<br>                },<br>                success : function(data){<br>                    $('#viewImg').attr('src', "../../../picture/" + data);<br>                },<br>                error:function () {<br>                    alert("error");<br>                }<br>            })<br>        },<br>        //自定义JS点击事件<br>        bindEvent : function(){<br>        },<br>    }<br>})(jQuery)

3、ajax实现异步请求

function loadfile(){<br>    var picName = $("#IronMan").val().replace("C:\fakepath\","");<br>    $.ajax({<br>        url:"PictureServlet",<br>        async:true,   //是否为异步请求<br>        cache:false,  //是否缓存结果<br>        type:"POST",<br>        dataType:"json",<br>        data :{<br>            "mark" : $("#mark").val(),<br>            "picName":picName,<br>        },<br>    })<br>    $('#viewImg').attr('src', "../../../picture/" + picName);<br>}

4、servlet存储并在本地存储图片文件

<br>protected void doPost(HttpServletRequest request, HttpServletResponse response) throws  IOException {<br>        System.out.println("servlet");<br>        response.setContentType("text/html");<br>        request.setCharacterEncoding("utf-8");<br>        response.setCharacterEncoding("utf-8");<br>        int mark = Integer.parseInt(request.getParameter("mark"));<br>        String picName = request.getParameter("picName");<br>        service.insertPic(mark,picName);<br> <br>        String directory = "E:/GDKJ/others/imooc_pic";<br>        File file = new File(directory,picName);<br>        if(file.exists()) {<br>            System.out.println(file.getAbsolutePath());<br>            System.out.println(file.getName());<br>            System.out.println(file.length());<br>        } else {<br>            file.getParentFile().mkdirs();<br>            try {<br>                file.createNewFile();<br>            } catch (IOException e) {<br>                System.out.println("创建新文件时出现了错误。。。");<br>                e.printStackTrace();<br>            }<br>        }<br>    }