通过传统的form表单提交的方式上传文件:

<form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">
<h1 >测试通过Rest接口上传文件 </h1>
<p >指定文件名: <input type ="text" name="filename" /></p>
<p >上传文件: <input type ="file" name="file" /></p>
<p >关键字1: <input type ="text" name="keyword" /></p>
<p >关键字2: <input type ="text" name="keyword" /></p>
<p >关键字3: <input type ="text" name="keyword" /></p>
<input type ="submit" value="上传"/>
</form>

不过传统的form表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用Ajax的方式进行请求的:

$.ajax({
url : "http://localhost:8080/STS/rest/user",
type : "POST",
data : $( '#postForm').serialize(),
success : function(data) {
$( '#serverResponse').html(data);
},
error : function(data) {
$( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
}
});

如上,通过$('#postForm').serialize()可以对form表单进行序列化,从而将form表单中的所有参数传递到服务端。

 
但是上述方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的。
不过如今主流浏览器都开始支持一个叫做FormData的对象,有了这个FormData,我们就可以轻松地使用Ajax方式进行文件上传了。
 
关于FormData及其用法
 
FormData是什么呢?我们来看看Mozilla上的介绍。
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件. 
 
所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
 

参见:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData

 
这里只展示一个通过from表单来初始化FormData的方式
<form enctype="multipart/form-data" method="post" name="fileinfo">
var oData = new FormData(document.forms.namedItem("fileinfo" ));
oData.append( "CustomField", "This is some extra data" );
var oReq = new XMLHttpRequest();
oReq.open( "POST", "stash.php" , true );
oReq.onload = function(oEvent) {
if (oReq.status == ) {
oOutput.innerHTML = "Uploaded!" ;
} else {
oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
}
};
oReq.send(oData);

参见:https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects

使用FormData,进行Ajax请求并上传文件

<form id= "uploadForm">
<p >指定文件名: <input type="text" name="filename" value= ""/></p >
<p >上传文件: <input type="file" name="file"/></ p>
<input type="button" value="上传" onclick="doUpload()" />
</form> function doUpload() {
var formData = new FormData($( "#uploadForm" )[]);
$.ajax({
url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
alert(returndata);
},
error: function (returndata) {
alert(returndata);
}
});
}

由于通过Ajax只能应付一些简单的文字类的传输,上传文件就捉襟见肘了,如果一直引用第三方的swf之类上传也不是一个办法,所以,一直在寻找解决文件上传的方法。找了许多方法,后来知道需要指定格式才能上传文件,就是要指定Form表单为: enctype="multipart/form-data"  才可以上传文件,然后这里面最后实现了上传,但是新的问题又来了,这中方法,文件上传之后,会跳转到另外一个页面,这样交互性非常不友好,所以,又想改进为无刷新的,

JavaScript:

<script type="text/javascript">

            function doUpload() {

                var formData = new FormData($("#uploadForm")[]);

                $.ajax({

                    url: 'http://localhost:34181/HomeService.asmx/UploadFile?jsoncallback=?',

                    type: 'POST',

                    data: formData,

                    async: false,

                    cache: false,

                    contentType: false,

                    processData: false,

//                    dataType: "jsonp",//问题就在这里,如果用了jsonp,那么后台就接收不到文件流,无法获得文件流,就没办法把文件写入服务器。如果不指定,就是注释掉,虽然ajax提交之后,还是跑到error那里去,但是文件已经是成功写入服务器的了。

                    jsonp: "jsoncallback",

                    success: function(returndata) {

                        var vData = JSON.stringify(returndata);

                        alert(vData);

                    },

                    error: function(returndata) {

                        var vData = JSON.stringify(returndata);

                        alert(vData);

                    }

                });

            }
</script>

HTML:

        <form id="uploadForm">

            <p>指定文件名:

                <input type="text" name="filename" value="" />

            </p>

            <p>上传文件:

                <input type="file" name="file" />

                </ p>

                <input type="button" value="上传" onclick="doUpload()" />
</form>

后台(WebService):

/// <summary>

        /// 上传文件

        /// </summary>

        /// <returns></returns>

        [WebMethod(EnableSession = true)]

        public void UploadFile()

        {

            HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";

            string jsonCallBackFunName = HttpContext.Current.Request.Params["jsoncallback"].ToString();//这里如果前台没有用jsonp,那么获取到的是一个?,所以处理完之后,前台是没法获取到服务器返回的内容的。

            //上面代码必须,不能注释

            //中间代码执行自己的业务操作,可返回自己的任意信息(多数据类型)

            string strJson = "";

            HttpFileCollection files = HttpContext.Current.Request.Files;

            string strFileName = HttpContext.Current.Request["filename"];

            byte[] b = new byte[files[].ContentLength];

            System.IO.Stream fs = (System.IO.Stream)files[].InputStream;

            fs.Read(b, , files[].ContentLength);

            ///定义并实例化一个内存流,以存放提交上来的字节数组。

            MemoryStream m = new MemoryStream(b);

            ///定义实际文件对象,保存上载的文件。

            FileStream f = new FileStream(Server.MapPath("\\UploadFile") + "\\"

             + files[].FileName, FileMode.Create);

            ///把内内存里的数据写入物理文件

            m.WriteTo(f);

            m.Close();

            f.Close();

            f = null;

            m = null;

            if (strJson == "")

            {

                strJson = "";

            }

            //下面代码必须,不能注释

            HttpContext.Current.Response.Write(string.Format("{0}({1})", jsonCallBackFunName, strJson));

            HttpContext.Current.Response.End();
}

转:http://yunzhu.iteye.com/blog/2177923

跨域解决方案:jsonp, jsoncallback

js:  jsonp 格式ajax

$.ajax({
'url':'http://100.80.62.40:8080/WebService.asmx/HelloWorld',
'type':'POST',
'contentType': "application/json; charset=utf-8",
'data':'',
'dataType':'json',
//dataType: "jsonp",
//jsonp: "jsoncallback",
'success': function(response){
console.log(response);
console.log(response.d);
console.log(JSON.parse(response.d));
}
});

关于JSON.parse解析的问题,其实这个是小问题,JSON 的这个正确格式为 :{“result”:”success”},注意内容一定为双引号,不能为单引号,单引号就会出现如此的错误。故在webservic方法中为正确使用 json格式,使用将双引号转义。

jsonp: "jsonp", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
 jsonpCallback: "jsonpCallback", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名

//        function jsonpCallback(result) {//这里是回调方法
//            alert(result.msg);
//            $("ws1").remove();//注意回调后如果有可能请执行删除操作
//        }

string jsonCallBack = Context.Request["jsoncallback"];  //HttpContext.Current.Request["jsonp"]

Context.Response.ContentType = "text/html; charset=utf-8";
Context.Response.Write(jsonCallBack +"("+数据+")");
Context.Response.End();

Web.Config

system.web, 注意关于WebService及其子标签的写法

<system.web>
<compilation targetFramework="4.5.2" debug="true"/>
<httpRuntime targetFramework="4.5.2"/>
<httpModules>
<add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web"/>
</httpModules>
<!--跨域请求-->
<webServices>
<protocols>
<add name="HttpGet"/>
<add name="HttpPost"/>
</protocols>
</webServices>
</system.web>

第二部分,这一块是为了解决JS 本源策略,跨域的问题。允许非同源调用

<system.webServer>
<!--解决跨域请求 by wys -->
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
<add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>

http://blog.csdn.net/shuai_wy/article/details/51184950

上传文件,使用FormData进行Ajax请求,jsoncallback跨域的更多相关文章

  1. Java中使用HttpPost上传文件以及HttpGet进行API请求(包含HttpPost上传文件)

    Java中使用HttpPost上传文件以及HttpGet进行API请求(包含HttpPost上传文件) 一.HttpPost上传文件 public static String getSuffix(fi ...

  2. ajax请求ashx跨域问题解决办法

    ajax请求ashx跨域问题解决办法 https://blog.csdn.net/windowsliusheng/article/details/51583566 翻译windowsliusheng  ...

  3. Asp.Net Core 3.0 学习3、Web Api 文件上传 Ajax请求以及跨域问题

    1.创建Api项目 我用的是VS2019 Core3.1 .打开Vs2019 创建Asp.Net Core Web应用程序命名CoreWebApi 创建选择API 在Controller文件夹下面添加 ...

  4. 传统表单提交文件上传,以及FormData异步ajax上传文件

    传统的文件上传: 只用将form表单的entype修改成multipart/form-data,然后就可以进行文件上传,这种方式常用并且简单. 以下是另一种方式FormData,有时候我们需要ajax ...

  5. nodejs express 上传文件 (格式 FormData)

    前台代码使用jQuery的ajax: <script type="text/javascript"> $(function(){ $('#file_upload').c ...

  6. 上传文件multipart form-data boundary 说明

    含义 ENCTYPE="multipart/form-data" 说明: 通过 http 协议上传文件 rfc1867协议概述,客户端发送内容构造. 概述              ...

  7. http 协议上传文件multipart form-data boundary 说明--转载

    原文地址:http://xixinfei.iteye.com/blog/2002017 含义 ENCTYPE="multipart/form-data" 说明: 通过 http 协 ...

  8. ASP.NET页面上传文件时提示文件大小超过请求解决方法

    在webconfig中节点 <system.web> </system.web> 下加入以下代码:maxRequestLength为限制上传文件大小,executionTime ...

  9. httprunner上传文件multipart/form-data

    Content-Type = multipart/form-data#上传文件 Rquest Payload ------WebKitFormBoundarymAyGmnyhpf3UBdec    C ...

  10. Ajax请求的跨域(CORS)问题

    用浏览器,通过XHR(XMLHttpRequest)请求向另外一个域名请求数据时.会碰到跨域(CORS)问题. CORS:Cross-Origin Resource Sharing 什么是跨域? 简单 ...

随机推荐

  1. 1003. Check If Word Is Valid After Substitutions

    We are given that the string "abc" is valid. From any valid string V, we may split V into ...

  2. (原创)Problem F: WPF的三位数

    Description PF哥是一个爱说骚话的骚年,今天他决定要用阿拉伯数字来说骚话,他将1,2,…,9共9个数字分成了三组,分别组成三个三位数,且使这三个三位数构成1:2:3的比例 他要说的骚话就是 ...

  3. xshell学习笔记

    $0:当前Shell程序的文件名dirname $0,获取当前Shell程序的路径cd `dirname $0`,进入当前Shell程序的目录 echo "hvkjvk" > ...

  4. P2480 [SDOI2010]古代猪文 Lucas+CRT合并

    \(\color{#0066ff}{ 题目描述 }\) 猪王国的文明源远流长,博大精深. iPig在大肥猪学校图书馆中查阅资料,得知远古时期猪文文字总个数为N.当然,一种语言如果字数很多,字典也相应会 ...

  5. 解决三星官方移植的内核默认是没有打开支持V4L USB devices

         在linux比较新的kernel,都标配了各类摄像头的驱动支持,不用我们自己移植驱动,只需通过make menuconfig配置内核支持我们所需的摄像头类型即可.以下是在三星官方内核中配置V ...

  6. 【Groovy】Spock with Maven

    已经在项目里使用Groovy/Spock做测试框架了,感觉和Maven结合在一起还是挺好用的. 在Maven的pom.xml里引入他们还是挺方便的,第一先要在dependency 里引入 <de ...

  7. maven mirrorOf

    转载 http://blog.csdn.net/isea533/article/details/21560089 在maven中配置一个mirror时,mirror通常会设置成*,还有可能是一个具体的 ...

  8. P4159 [SCOI2009]迷路

    传送门 先考虑只有 01 边权的情况 显然可以DP+矩阵加速 但是现在边权不止 1 然鹅最大也只有 9 所以从这里入手,把点拆成 9 个,然后点之间的边权也就可以变成 1 了 同样的转移和矩阵加速 注 ...

  9. poj1860 兑换货币(bellman ford判断正环)

    传送门:点击打开链接 题目大意:一个城市有n种货币,m个货币交换点,你有v的钱,每个交换点只能交换两种货币,(A换B或者B换A),每一次交换都有独特的汇率和手续费,问你存不存在一种换法使原来的钱更多. ...

  10. django组件之form

    form组件 首先要了解form组件的一些基本语法: 1.  校验数据:    form组件校验的是字典,所以数据应该以字典形式传进去    form 校验,可以多传数据,不要紧(只校验form组件有 ...