easy ui 异步上传文件，跨域

easy ui 跨域上传文件，代码如下：

1.html代码：（这段代码是个win窗体，我在点击上传图片按钮然后弹出一个上传图片的窗体，选择图片再进行上传，这样在form提交时，提交的参数会少一点。）

说明：跨域上传文件时：

a、新加irame

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="width: 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="width: 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

            });

            //----上传图片 结束----

秒客网

easy ui 异步上传文件，跨域

相关文章