文件异步上传

转载于http://blog.csdn.net/zwx19921215/article/details/44133113  

<!-- 上传窗口 -->   

    <div id="uploadPicWindow" class="easyui-window" title="上传图片"  style="width:420px;height:220px;padding:20px;background:#fafafa;" data-options="iconCls:'icon-save',closable:true, collapsible:true,minimizable:true,maximizable:true">  

        <form id="picForm" action="" method="post">  

            <div style="margin-bottom:20px">  

                图片名称:  

                <input type="text" name="name" id="picName" class="easyui-textbox" style="width:80%" data-options="required:true,validType:'stringCheck'"/>  

            </div>  

            <br/>  

            <div style="margin-bottom:20px">  

                选择图片:  

                <input type="file" name="file" id="file" data-options="prompt:'Choose a file...'" style="width:80%"/>  

            </div>  

            <div id="picTip"></div>  

            <div id="formWindowfooterPic1" style="padding:5px;text-align:right;">   

                <a href="#" onclick="submitPic();" class="easyui-linkbutton" data-options="iconCls:'icon-save'">提交</a>  

            </div>  

        </form>  

    </div>

 前端具体写法

function submitPic(){  

    if(!$("#picForm").form('validate')){  

        return false;  

    }  

    var projectId = $("#projectId").val();  

    var name=$("#picName").val();  

    var type="1";//展示图片  

    var f = $("#file").val();  

    if(f==null||f==""){  

        $("#picTip").html("<span style='color:Red'>错误提示:上传文件不能为空,请重新选择文件</span>");  

        return false;  

      }else{  

       var extname = f.substring(f.lastIndexOf(".")+1,f.length);  

       extname = extname.toLowerCase();//处理了大小写  

       if(extname!= "jpeg"&&extname!= "jpg"&&extname!= "gif"&&extname!= "png"){  

         $("#picTip").html("<span style='color:Red'>错误提示:格式不正确,支持的图片格式为：JPEG、GIF、PNG！</span>");  

         return false;  

        }  

      }  

     var file = document.getElementById("file").files;    

     var size = file[0].size;  

     if(size>2097152){  

          $("#picTip").html("<span style='color:Red'>错误提示:所选择的图片太大，图片大小最多支持2M!</span>");   

          return false;  

      }  

    ajaxFileUploadPic(projectId,name,type);  

}  

  

function ajaxFileUploadPic(projectId,name,type) {  

    $.ajaxFileUpload({  

        url : '${ctx}/projectPic/saveorupdate.jhtml?projectId='+projectId+'&name='+name+'&type='+type, //用于文件上传的服务器端请求地址  

        secureuri : false, //一般设置为false  

        fileElementId : 'file', //文件上传空间的id属性  <input type="file" id="file" name="file" />  

        type : 'post',  

        dataType : 'json', //返回值类型 一般设置为json  

        success : function(data, status) //服务器成功响应处理函数  

        {  

             $("#picList").datagrid('reload');  

             $('#uploadPicWindow').window('close');  

            // alert(data.msg);  

        },  

        error : function(data, status, e)//服务器响应失败处理函数  

        {  

             $("#picList").datagrid('reload');  

             $('#uploadPicWindow').window('close');  

            // alert(data.msg);  

        }  

    });  

    return false;  

}