easy ui 跨域上传文件,代码如下:
1.html代码:(这段代码是个win窗体,我在点击上传图片按钮然后弹出一个上传图片的窗体,选择图片再进行上传,这样在form提交时,提交的参数会少一点。)
说明:跨域上传文件时:
a、新加irame
<iframe name="upload" style="display:none"></iframe>
b、 <form id="form_upload_pic" method="post" enctype="multipart/form-data" target="upload">这是重要代码 target="upload"
<%-- 上传窗体 开始--%> <div id="win_Upload_pic" class="easyui-window" title="上传图片" data-options="top:'40%'" style=" 600px; height: 150px; padding: 5px;"> <div style="padding: 10px"> <form id="form_upload_pic" method="post" enctype="multipart/form-data" target="upload"> <table> <tr> <td> <input type="file" name="upload" id="upload" style=" 400px;" class="easyui-validatebox" validtype="fileType['BMP|GIF|JPG|JPEG|ICO|PNG|TIF']" required="true" invalidmessage="请选择(BMP|GIF|JPG|JPEG|ICO|PNG|TIF)等格式的图片" /></td> </tr> </table> <input id="key" name="key" type="hidden" /> <input id="Upload_Type" name="Upload_Type" type="hidden" value="company" /> <input id="flog" name="flog" type="hidden" value="" /> </form> <iframe name="upload" style="display: none"></iframe> <%--//注意,是name="upload",而不是id="upload" --%> </div> <div style="text-align: right; padding: 5px;"> <a id="btn_upload_pic" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)">上传图片</a> <a id="btn_cancel_pic" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)">取消上传</a> </div> </div> <%-- 上传窗体 结束--%>
2.js代码:(重要部分,由于写的上传图片文件公共是封装在一个公用的web站点也是一个通用类里面,所以所有的上传都是跨域,extjs和jq easyui 等上传都要通过这一个web站点进行上传文件)
①、上分两大步骤,第一步是将上传的文件通过form提交到通用站点里面进行文件处理,以及存储临时图片信息;比如:图片名称,图片大小,以及图片路径等
②、通过JsonP将上传到服务器的图片以及文件,相关信息取出来返回到当前页面进行数据保存.
返回格式:success_jsonpCallback({success:true,FileName:'13086416286790950695.png',PicSize:'348645',PicUrl:'%5cjdqp.images%5cjdqp.images.PicLib%5cUpload_Company%5c%5c2015-09-11%5c100x100'})
//----上传图片 开始---- //上传图片 $('#btn_upload_pic').click(function () { //这里上传需要两个参数,一个是key,另一个是Upload_Type var guid = new GUID(); var strGuid = guid.newGUID(); $("#key").val(strGuid); $("#form_upload_pic").form('submit', { url: 'http://easyui.com:99999/Upload', //params: { // key: strGuid, // Upload_Type: "company" //}, onSubmit: function () { var bl = $("#form_upload_pic").form("validate"); if (bl) return true; else return false; }, success: function (data) { $.ajax({ type: "get",//jquey是不支持post方式跨域的 url: "http://easyui.com:99999/imgurl",//跨域请求的URL data: { key: $("#key").val() },//参数 async: false, dataType: "jsonp", //传递给请求处理程序,用以获得jsonp回调函数名的参数名(默认为:callback)jsonPCallback jsonp: "jsonPCallback", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名 jsonpCallback: "success_jsonpCallback", //成功获取跨域服务器上的json数据后,会动态执行这个callback函 success: function (result) { var flog = $("#flog").val(); var PicName = result.FileName; var PicUrl = result.PicUrl; var PicUrl = PicUrl + "/" + PicName; if (flog == 'BusinessLincesePic') { $('#BusinessLincesePic').val(PicUrl); } else if (flog == 'CompanyImage') { $('#CompanyImage').val(PicUrl); } $('#win_Upload_pic').window('close'); // close a window jQuery.messager.alert('提示信息', result.FileName); }, failure: function (result) { Ext.MessageBox.alert("提示", "上传失败!"); } }); } }); }); //关闭窗体 $('#btn_cancel_pic').click(function () { $('#win_Upload_pic').window('close'); // close a window }); //----上传图片 结束----