Spring MVC 上传图片无刷新预览

Spring Mvc 上传图片 我早期写在了 360图书馆 ,就不移过来了.

地址http://www.360doc.com/content/14/1226/11/17181183_435868225.shtml

 

无刷新上传 jsp页面代码.使用的是ajaxFileUpload插件.

先简单介绍一下ajaxFileUpload ,这个插件仅7KB .用起来也特别简单.

如果不是用在特别复杂的地方上应该不会出现什么bug

 

代码如下:

HTML代码:

 <input type="file" id="btnFile" name="imgFile" hidden="hidden" />
                <span><a href="javascript:void (0)" onclick="saveImg();" style="width:100px;">上传</a></span>

JavaScript代码:

function saveImg(){
        $("#btnFile").click();
        $("#btnFile").change(function(){
            uploadImg();
        })
    }
    function uploadImg(){
        if($("#btnFile").val()!=""){
            $.ajaxFileUpload
            (
                    {
                        url: '${pageContext.request.contextPath}/kindEditorController/saveImg', //用于文件上传的服务器端请求地址
                        secureuri: false, //是否需要安全协议，一般设置为false
                        fileElementId: 'btnFile', //文件上传域的ID
                        dataType: 'json', //返回值类型 一般设置为json
                        success: function (data, status)  //服务器成功响应处理函数
                        {
                            if(data.error==0){
                                $('.contentDiv').html("<img src='"+data.url+"' width='290px' height='160px'/>");
                            }else{
                                $.messager.alert("错误",data.message,'error');
                            }
                        },
                        error: function (data, status, e)//服务器响应失败处理函数
                        {
                            $.messager.alert("错误","网络忙,请稍后再试.",'error');
                        }
                    }
            )
            return false;
        }