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" />
<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 异步上传文件,跨域的更多相关文章
- (H5)FormData+AJAX+SpringMVC跨域异步上传文件
最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...
- struts2 jquery ajaxFileUpload 异步上传文件
网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...
- 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload
http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...
- 利用jquery.form实现异步上传文件
实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...
- JQuery插件ajaxFileUpload 异步上传文件(PHP版)
太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...
- jquery ajaxFileUpload异步上传文件
ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http:/ ...
- Servlet异步上传文件
这里需要用到插件ajaxfileupload.js,jar包:commons-fileupload-1.3.2.jar,commons-io-2.5.jar 注意红色部分的字!!!! 1.创建一个we ...
- 关于js异步上传文件
好久没登录博客园了,今天来一发分享. 最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了).当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件 ...
随机推荐
- 虚拟机中Ubuntu设置固定IP方法
--2013年7月29日20:39:16 场景:在搭建hadoop分布式系统的时候,每次重启节点,节点对应的ip发生变化,现在需要将每个节点绑固定的ip --原理: 设置节点用的网卡->绑定ip ...
- HDU 1016 Prime Ring Problem (DFS)
Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- #if...#endif的用法总结
在写到 pwm音阶程序的时候,在代码中有#if...#endif的用法问题,相关音阶的代码如下: /************************************************* ...
- AI 对不起 我还爱着你
艾弗森,对不起,我还爱着你.有时候我自己都不知道自己我怎么了,直到最后才发现,我还爱着你. 那天起,我认识了你,便一发不可收拾.这些天,谢谢你,似乎因为你的影响让我改变了,坚持了许多.致以至今我才发现 ...
- 不可小觑的“alt”
定义和用法 alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本. 假设由于下列原因用户无法查看图像,alt 属性可以为图像提供替代的信息: 网速太慢 src 属性中的错误 浏览器禁用图像 ...
- Jersey(1.19.1) - Root Resource Classes
Root resource classes are POJOs (Plain Old Java Objects) that are annotated with @Path have at least ...
- MyBatis(3.2.3) - One-to-one mapping using nested ResultMap
We can get Student along with the Address details using a nested ResultMap as follows: <resultMap ...
- memcached缓存机制+微软缓存机制使用详解
1. why Memcached 1.1 一台web服务器上,iis接收的请求数是有限的,当访问量超大的时候,网站访问就会遇到瓶颈了,处理方式就是运用多了服务器把请求数分流(集群),对外公布的就一 ...
- 转:SqlServer2008误操作数据(delete或者update)后恢复数据
Sqlserver2008误操作数据(delete或者update)后恢复数据(转) 实际工作中,有时会直接在数据库中操作数据,比如对数据进行delete或者update操作,当进行这些操作的时候,如 ...
- ### 学习《C++ Primer》- 9
Part 9: 模板与泛型编程(第16章) // @author: gr // @date: 2016-03-18 // @email: forgerui@gmail.com 1. 模板参数 类型模板 ...