当前位置:首页 > 开发 > Web前端 > Jquery > 正文

HTML5 FormData 进行文件jquery ajax 上传 到又拍云

发表于: 2014-08-03   作者:ileson   来源:转载   浏览:
摘要: html5 新东西:FormData  可以提交二进制数据。 页面test.html <!DOCTYPE> <html> <head> <title> formdata file jquery ajax upload</title> </head> <body> <
html5 新东西:FormData  可以提交二进制数据。


页面test.html
<!DOCTYPE>
<html>
<head>
<title> formdata file jquery ajax upload</title>
</head>

<body>
<form class="form-horizontal" role="form" id="myForm"
					action="http://v0.api.upyun.com/xxx" method="post"
					enctype="multipart/form-data">
				
					<input type="hidden" name="policy"
						value="">
					<input type="hidden" name="signature"
						value="">

					<div class="form-group">
						<label class="col-sm-2 control-label">说明:</label>
						<div class="col-sm-10">
							<p class="form-control-static ">ajax 文件上传 。</p>
						</div>
					</div>
					<div class="form-group">
						<label for="url" class="col-sm-2 control-label"><s>*</s>图片选择:</label>
						<div class="col-sm-7">
							<input type="file" name="file" id="file_upload" value=""
								class="form-control" placeholder="图片地址">
						</div>
					</div>

					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-7">
						
							<a id="btnAjax" class="btn btn-info col-md-5 col-lg-offset-1"
								onclick="uploadByForm();">Ajax上传</a>
						</div>
					</div>
				</form>

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

/**
		 * ajax 上传。
		 */
		function uploadByForm() {
        		var formData = new FormData($("#myForm")[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。
			
			//var formData = new FormData();//构造空对象,下面用append 方法赋值。
// 			formData.append("policy", "");
// 			formData.append("signature", "");
// 			formData.append("file", $("#file_upload")[0].files[0]);
			var url = "http://v0.api.upyun.com/xxx";
			$.ajax({
				url : url,
				type : 'POST',
				data : formData,

				/** 
				 * 必须false才会避开jQuery对 formdata 的默认处理 
				 * XMLHttpRequest会对 formdata 进行正确的处理 
				 */
				processData : false,
				/** 
				 *必须false才会自动加上正确的Content-Type 
				 */
				contentType : false,
				success : function(responseStr) {
                                    alert("成功:" + JSON.stringify(responseStr));
					// 					var jsonObj = $.parseJSON(responseStr);//eval("("+responseStr+")");
				},
				error : function(responseStr) {
					alert("失败:" + JSON.stringify(responseStr));//将    json对象    转成    json字符串。
				}
			});
		}
</script>
</body>
</html>






引用

HTML5 FormData 进行文件jquery ajax 上传 到又拍云

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
这段时间,一直练习在ASP.NET MVC程序中上传文件。静态,动态,单个或多文件上传。 在网上有看到网
ajaxfileupload下载:链接: http://pan.baidu.com/s/1dDtX6Pb 密码: qqi2 $('.upload-success').show
简单的项目开始: ionic start camera-upload blank 添加平台 ionic platform add ios # 需要mac环
引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使
引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使
  早在公元2011年6月3日傍晚,人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床。哦,
  早在公元2011年6月3日傍晚,人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床。哦,
利用HTML5的新特性进行处理 1、所需jar包:commons-fileupload-1.2.2.jar 、commons-io-2.1.jar 2、
发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面
近来,项目有个小需求需要使用到Ajax异步上传文件,本来Ajax是不支持上传文件的,但是可以通过IFrame
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号