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表单提交(原谅我以前就是这么干的),不过表单里不仅有文件 ...
随机推荐
- VMware系统运维(三 )SQL Server 2008 R2安装
1. 点击"全新SQL Server 独立安装或向现有安装添加功能" 2.验证通过,点击确定. 3.输入数据库密钥,必须支持正版,不然微软打你屁屁,嘻嘻 4.不接受不让你过,所以不 ...
- 阿里云ubuntu搭建SVN服务器
系统:Ubuntu 14.04 64位 新手注意:连接到服务器之后,默认会在用户文件夹位置“~”,使用cd /命令可以回到根目录.SVN搭在公共的位置比较稳妥. 1.通过apt-get安装subver ...
- Redis中文显示为Unicode编码的解决办法
通过Xshell远程连接Linux中的Redis数据库.... 存入Reids中的value有中文. Xshell得到之后中文并不显示为乱码,显示的是中文对应的Unicode编码: 在Xshell中字 ...
- Android学习之——图形图像处理(Bitmap、BitmapFactory)(一)
转载自http://blog.csdn.net/csxwc/article/details/10345235 Bitmap是Android系统中的图像处理的最重要的类之一.用它可以获取图像文件信息,对 ...
- 网易新闻RSS阅读器
首先需要分析网易RSS订阅中心的网页布局情况. 网易RSS订阅中心:http://www.163.com/rss/ 你会发现RSS文件由一个<channel>元素及其子元素组成,除了频道本 ...
- mysql 强制走索引
查询是数据库技术中最常用的操作.查询操作的过程比较简单,首先从客户端发出查询的SQL语句,数据库服务端在接收到由客户端发来的SQL语句后, 执行这条SQL语句,然后将查询到的结果返回给客户端.虽然过程 ...
- Objective-C 【动态类型检测&响应方法】
------------------------------------------- 动态类型检测 代码: #import <Foundation/Foundation.h> @inte ...
- Linux学习三部曲(之三)
今天用linux的时候,想到在windows客户端上传文件到linux服务端. 下面介绍一种方法. 可以通过SecureCRT上传.下载文件(使用sz与rz命令). 1. 安装 lrzsz 在Secu ...
- 基于AngularJS/Ionic框架开发的性能优化
AngularJS作为强大的前端MVVM框架,虽然已经做了很多的性能优化,但是我们开发过程中的不当使用还是会对性能产生巨大影响. 下面提出几点优化的方法: 1. 使用单次绑定符号{{::value}} ...
- 比较X与Y的大小,绝对精准!!!!!!
代码! #include<stdio.h> int max(int a,int b) { int x; x=a+b; return x; } int main() { int i,n,t; ...