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表单提交(原谅我以前就是这么干的),不过表单里不仅有文件 ...
随机推荐
- CentOS(六)--Linux系统的网络环境配置
Linux系统下的网络环境配置,Linux.Unix就是网络的世界,所以在Linux系统中如何配置网络环境变量是至关重要的,这里将会给出3种Linux系统下网络环境配置的方法! 在配置网络环境之前,首 ...
- appendChild()插入节点需注意的问题
第一点:首先appendChild插入节点时返回的值是插入的节点本身,另外必须要找到所要插入的父节点: var returnNode = parentNode.appendChild(childNod ...
- CF Anya and Ghosts (贪心)
Anya and Ghosts time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...
- [改善Java代码]养成良好习惯,显式声明UID
建议11: 养成良好习惯,显式声明UID 我们编写一个实现了Serializable接口(序列化标志接口)的类, Eclipse马上就会给一个黄色警告:需要增加一个Serial Version ID. ...
- Netty线程模型
一.Reactor模型 1.单线程模型 Reactor单线程模型,指的是所有的IO操作都在同一个NIO线程上面完成,NIO线程的职责如下: 1)作为NIO服务端,接收客户端的TCP连接: 2)作为NI ...
- poj 1469 二分图最大匹配
就是最简单的最大匹配,没的说 #include<iostream> #include<cstdio> #include<cstring> #include<a ...
- Ehcache(2.9.x) - API Developer Guide, Cache Usage Patterns
There are several common access patterns when using a cache. Ehcache supports the following patterns ...
- jQuery 自定义事件的学习笔记
jquery中提供了两种方法可以绑定自定义事件: bind()和one()而绑定的自定义事件的触发,必须得用jquery中的trigger()方法才能触发. 我们先来看on事件 代码如下 复制代码 ...
- Cocos移植到Android-通过命令行交叉编译打包
当我们在Windows下使用Visual Studio开发好Win32平台的游戏程序后,我们需要把它们移植到不同的平台上.Cocos2d-x支持很多个平台,然而,我们不可能介绍全部平台的移植.我们总结 ...
- PHP中的变量
PHP中的变量 程序是由代码与数据两部分组成,数据存储在变量,变量的本质是内存中的一个存储空间.变量对应的空间有一个名子,叫变量名,变量名用于对数据进行读写. 变量的定义 在php变量名之前必须使用' ...