easy ui 异步上传文件,跨域

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="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"/>
            </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将上传到服务器的图片以及文件,相关信息取出来返回到当前页面进行数据保存

 //----上传图片 开始----
            //上传图片
            $(‘#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://localhost:10000/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://localhost:10000/imgurl",//跨域请求的URL
                            data: { key: $("#key").val() },//参数
                            async: false,
                            dataType: "jsonp",
                            //传递给请求处理程序,用以获得jsonp回调函数名的参数名(默认为:callback)jsonPCallback
                            jsonp: "jsonPCallback",
                            //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
                            jsonpCallback: "success_jsonpCallback",
                            //成功获取跨域服务器上的json数据后,会动态执行这个callback函
                            success: function (data) {
                                var obj = jQuery.parseJSON(data);
                                var PicName = obj.FileName;
                                var PicUrl = obj.PicUrl;
                                var PicUrl = PicUrl + "/" + PicName;
                                if (flog == ‘BusinessLincesePic‘) {
                                    $(‘BusinessLincesePic‘).setValue(PicUrl);
                                } else if (flog == ‘CompanyImage‘) {
                                    $(‘CompanyImage‘).setValue(PicUrl);
                                }
                                jQuery.messager.alert(‘提示信息‘, obj.FileName);
                            }, failure: function (result) {
                                Ext.MessageBox.alert("提示", "上传失败!");
                            }
                        });
                    }
                });
            });
            //关闭窗体
            $(‘#btn_cancel_pic‘).click(function () {
                $(‘#win_Upload_pic‘).window(‘close‘);  // close a window
            });
            //----上传图片 结束----
时间: 2024-10-30 08:49:09

easy ui 异步上传文件,跨域的相关文章

异步上传文件并获得返回值(完全跨域)

http://blog.csdn.net/lrz1011/article/details/7913992 异步上传文件并获得返回值(完全跨域)AJAX可以进行数据的异步请求,但对于文件和跨域问题却束手无策. Jsonp可以进行跨域数据的异步请求,但同样不能使用于文件. <form>表单可以进行跨域数据和文件的上传,但却会使页面跳转. 那么如何同时实现“异步”+“跨域”+“文件”+“返回值”这几个特性呢?方法如下: 原理: 将<form>表单通过一个iframe来submit,也就是

(H5)FormData+AJAX+SpringMVC跨域异步上传文件

最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/plugins/

struts2 jquery ajaxFileUpload 异步上传文件

一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和struts2框架和好的融合在一起.但是网上的提供的一些ajaxFileUpload.js插件存在一些问题,不能够实现多次点击上传文件,要想再次上传必须重新刷新页面.在网上找了好久才找到真正的解决方案,有些网友给出的解决方案并没有真正的解决问题,不知到什么原因.我的修改: 原文件: var oldElement = $('#' +

异步上传文件多种方式归纳

最近在做异步上传文件的工作,用到了一些库,这里归纳下,暂且不考虑异常处理,仅作为demo. 1.不用任何插件,利用iframe,将form的taget设为iframe的name,注意设为iframe的id是没用的,跟网上很多说的不太一致 iframe_upload.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)

前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.先对ajaxFileUpload插件的语法参数进行讲解 原理:ajaxfileu

Jquery_异步上传文件多种方式归纳

1.不用任何插件,利用iframe,将form的taget设为iframe的name,注意设为iframe的id是没用的,跟网上很多说的不太一致 iframe_upload.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

JQuery插件ajaxFileUpload 异步上传文件(PHP版)

太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.

jQuery插件-ajaxFileUpload异步上传文件

ajaxFileUpload是前两天学习过程中接触到的一个JQ插件,功能很简单,就是实现异步上传文件的功能. 1.语法介绍 $.ajaxFileUpload([setting]); 参数说明: (1)url——执行上传处理的地址: (2)secureuri——是否启用安全提交,默认为false: (3)fileElementId——需要上传<input type=”file”>控件id属性值: (4)data——自定义参数,即需要额外传递的JSON格式数据: (5)type——请求方式,提交自

简述三种异步上传文件方式

 很久没写过博客了! 上次写已经是去年的12月了,离现在也有足足三个月了.这几个月因为要搭建个人网站以及准备个人简历,包括最近要准备最近的各大公司的实习春招,很难抽时间来写博客,这次的异步文件上传我觉得是很有必要了解的,笼络了很多知识点,因此准备写一篇博客来巩固下. 异步上传文件是为了更好的用户体验,是每个前端必须掌握的技能.这里我提出三点有关异步文件上传的方式. 使用第三方控件,如Flash,ActiveX等浏览器插件上传. 使用隐藏的iframe模拟异步上传. 使用XMLHttpReques