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" />
<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 异步上传文件,跨域的更多相关文章

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

    最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...

  2. struts2 jquery ajaxFileUpload 异步上传文件

    网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...

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

    前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...

  4. 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload

    http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...

  5. 利用jquery.form实现异步上传文件

    实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...

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

    太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...

  7. jquery ajaxFileUpload异步上传文件

    ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http:/ ...

  8. Servlet异步上传文件

    这里需要用到插件ajaxfileupload.js,jar包:commons-fileupload-1.3.2.jar,commons-io-2.5.jar 注意红色部分的字!!!! 1.创建一个we ...

  9. 关于js异步上传文件

    好久没登录博客园了,今天来一发分享. 最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了).当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件 ...

随机推荐

  1. [改善Java代码]枚举和注解结合使用威力更大

    注解的写法和接口很类似,都采用了关键字interface,而且都不能有实现代码,常量定义默认都是pulbic static final类型的. 他们的主要不同点是:注解在interface前加上@字符 ...

  2. okhttputils开源库的混淆配置(Eclipse)

    #=====================okhttputils框架===================== #====okhttputils==== -libraryjars libs/okht ...

  3. css3 边框记

    css3 边框 border属性在css1中就已经定义了,使用它可以设置元素的边框风格,边框颜色以及边框粗细. border-width:设置元素边框的粗细. border-color:设置元素边框的 ...

  4. spring分布式事务学习笔记

    最近项目中使用了分布式事务,本文及接下来两篇文章总结一下在项目中学到的知识. 分布式事务对性能有一定的影响,所以不是最佳的解决方案,能通过设计避免最好尽量避免. 分布式事务(Distributed t ...

  5. xml使用系统整理

    1. 认识xml 可扩展标记语言,一种用于标记电子文档使其具有结果性的标记语言,它可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言. 2. 和超文本标记语言区别 2.1 ...

  6. C# winform滚动字幕

    private void timer1_Tick(object sender, EventArgs e)//用Timer来控制滚动速度 { label1.Left -= 2;//设置label1左边缘 ...

  7. android自学笔记(1):android简介

    Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发.尚未有统一中文名称,中国大陆地区较 多人使用“安卓 ...

  8. IOS基础 Day-1手动内存管理

    辞职回家打算自学IOS开发,就在借个地方记录一下 Day-1      手动内存管理                   主要内容:release  retain必须配对好,不然会占用内存 慢慢积累导 ...

  9. JAR、WAR、EAR 区别

    JAR包 JAR 文件格式以流行的 ZIP 文件格式为基础: 与 ZIP 文件不同的是,JAR 文件不仅用于压缩和发布,而且还用于部署和封装库.组件和插件程序,并可被像编译器和 JVM 这样的工具直接 ...

  10. angular的post请求,SpringMVC后台接收不到参数值的解决方案

    这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值: @RequestMapping(method = RequestMethod.POST) @ResponseBod ...