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. Ionic中弹窗

    Ionic中弹窗有两种ionicModal和ionicPopup; $ionicModal是完整的页面: $ionicPopup是(Dialog)对话框样式的,直接用JavaScript设定对话框的一 ...

  2. [ImportNew]8张图理解Java

    http://www.importnew.com/11725.html 1.字符串的不变性. 下面这张图展示了这段代码做了什么 String s = "abcd"; s = s.c ...

  3. [Yii2]Access to debugger is denied due to IP address restriction. The requesting IP address is

    在更新到正式平台,看到runtime/app.log 有 Access to debugger is denied due to IP address restriction. The request ...

  4. 实用工具推荐(Live Writer)(2015年05月26日)

    1.写博客的实用工具 推荐软件:Live Writer 使用步骤: 1.安装 Live Essential 2011,下载地址:http://explore.live.com/windows-live ...

  5. Quartz Scheduler(2.2.1) - Working with TriggerListeners and JobListeners

    TriggerListeners and JobListeners Listeners are objects that you create to perform actions based on ...

  6. Linux 命令 - chmod: 更改文件模式

    文件的模式 当使用 ls -l 命令查看目录内容时 [huey@huey-K42JE cmdline]$ ls -l /etc/passwd -rw-r--r-- 1 root root 1917 J ...

  7. HTML特殊符号对照表(转)

    table { border-collapse: collapse; } #htmlchar-container-list { width: 100%; border-top: 2px solid # ...

  8. SSIS_TXT有规则资料导入到EXCEL

    SSIS开发需要完全安装sqlserver.本次demo是sqlserver2008. 1.创建项目 2.解决方案打开如图所示. 3.拉取一个序列容器,一个数据流任务. 4.在数据流任务点击.拉取一个 ...

  9. 实现Foreach遍历

    实现Foreach遍历的集合类,需要实现IEnumerable接口,泛型集合则需要实现IEnumerable<T>接口 using System; using System.Collect ...

  10. 打造属于自己的安卓Metro界面

    前言: 各位小伙伴,又到了每周更新文章了时候了,本来是周日能发出来呢,这不是赶上清明节吗,女王大人发话了,清明节前两天半陪她玩,只留给我周一下午半天时间写博客,哪里有女王哪里就有压迫呀有木有!好了闲话 ...