ajax实现附件上传

利用FormData实现附件上传(两种方式)

  1. var  reg=document.getElementById(’reg’);
  2. var fd = new FormData(reg);
  3. send(fd);   // fd里边有普通表单信息和附件信息

第二种方式

  1. var mypic = document.getElementById(’myhead’).files[0];//获取file表单的文件对象
  2. fd.append(’myhead’,mypic);
  3. send(fd);

html5新标准,获取附件信息files,我们可以利用files获取图片的二进制信息,实现选择图片文件后立即在页面显示缩略图:

  var mypic = document.getElementById(’myhead’).files[0];

  document.images[0].src = window.URL.createObjectURL(mypic);//获取image对象,将其src属性更改为选择的图片的二进制信息

选择文件页面立即显示缩略图,显示上传进度:

<script type="text/javascript">

	function f1(){

		var mypic = document.getElementById(‘myhead‘).files[0];

		//抓取页面的附件信息,实现上传
		var fd = new FormData();
		fd.append("myhead",mypic);

		var xhr = new XMLHttpRequest();

		xhr.onreadystatechange = function(){
			if(xhr.readyState==4 && xhr.status==200){
				alert(xhr.responseText);
			}
		}

		//侦查当前附件上传情况,用来处理上传进度,显示进度条
		xhr.upload.onprogress = function(evt){
			//侦查附件上传情况
			//通过事件对象侦查
			//该匿名函数表达式大概0.05-0.1秒执行一次
			//console.log(evt);
			//console.log(evt.loaded);  //已经上传大小情况
			//evt.total; 附件总大小
			var loaded = evt.loaded;
			var tot = evt.total;
			var per = Math.floor(100*loaded/tot);  //已经上传的百分比
			var son =  document.getElementById(‘son‘);
			son.innerHTML = per+"%";
			son.style.width=per+"%";
		}

		xhr.open("post","./04.php");
		xhr.send(fd);
	}

	//立刻显示被上传的图片
	function f2(){
		//利用files获得被上传附件(图片)信息
		var mypic = document.getElementById(‘myhead‘).files[0];
		//利用mypic获得图像的url地址(二进制源码)
		//URL  html5新标准属性
		//window.URL.createObjectURL(mypic);
		document.getElementsByTagName(‘img‘)[0].src = window.URL.createObjectURL(mypic);
	}
</script>
<style type="text/css">
    #parent{width:550px; height:50px; border:5px solid blue;}
    #son {width:0; height:100%; background-color:lightblue; text-align:center; line-height:50px; font-size:20px; font-weight:bold;}
</style>

	<div id="parent"><div id="son"></div></div><!--用来显示上传进度条-->
	用户头像:<input type="file" id="myhead" name="myhead" onchange="f2()"/><br />
	<img src=""  width="200" height="150"/><br />
	<input type="button" value="上传头像" onclick="f1()" /><br />

  

ajax实现附件上传

时间: 2024-11-06 03:36:59

ajax实现附件上传的相关文章

jquery 通过ajax FormData 对象上传附件

之前上传附件都是用插件,或者用form表单体检(这个是很久以前的方式了),今天突发奇想,自己来实现附件上传,具体实现如下 html: <div>   流程图: <input id="file" type="file" >   <button ng-click="bpmmainFunction.createBpm()">提交</button></div> js: $scope.bpmmai

MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题,答案是不能的!

MVC 5.0(or5.0↓)  Ajax.BeginForm 异步上传附件问题,答案是不能的! (请注意我这里说的异步!) 来看一下下面这段一步提交file的代码 //前台 .cshtml 文件 <script src="~/jquery.unobtrusive-ajax.js"></script>@using (Ajax.BeginForm("upLoadAsync", "UploadFile", new AjaxOp

jQuery+php实现ajax文件即时上传

很多项目中需要用到即时上传功能,比如,选择本地图片后,立即上传并显示图像.本文结合实例讲解如何使用jQuery和PHP实现Ajax即时上传文件的功能,用户只需选择本地图片确定后即实现上传,并显示上传进度条,上传完成后,显示图片信息. 查看演示DEMO下载源码 HTML 本示例基于jQuery以及相当出色的jquery.form插件,所以,先要载入jquery库和form插件.  <script type="text/javascript" src="jquery.min

如何解决控件附件上传时超大附件无法上传的问题

起因: 我们的附件控件里边,一般情况下默认设置大小为10M,如果我们设置30M的情况,就无法满足上传了. 原因: 是因为我们ajax的一个文件里取我们控件自定义大小的值,无法取到.因为我们传的int类型的值,所以我们在用QueryString取的时候的值为Null. 解决: 打开Portal->Ajax->FileUploadHandler.ashx文件里,找到以下代码: Protected int MaxSize { get { if (!int.TryParse(Request.Query

使用plupload做一个类似qq邮箱附件上传的效果

公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可以添加多个附件,也可一个都不添加 以其中一个为例:(文件保存到了数据库中),有关plupload的内容可参考:http://www.360doc.com/content/14/0714/03/552866_394228686.shtml 首先是po package cn.com.plupload.p

多附件上传

html前台 <form action="/api/Manuscript/AddReviewOpinionFile" method="post" enctype="multipart/form-data">   //这个方法仅限于测试使用 选择图片: <input type="file" name="uploads" multiple >   //multiple  这个属性是在ht

基于jsp的AJAX多文件上传的实现

最近的项目开发中,遇到了一个多文件上传的问题,即在不刷新页面的情况下,上传多个文件至服务器.现总结分享如下: 本文主要采用了基于jsp的ajax,jquery,servlet等技术. 1.upload.jsp 点击上传时,调用对应的fileupload函数,通过ajax将文件异步传送到servlet中处理.注意在文件上载时,所使用的编码类型应当是"multipart/form-data",它既可以发送文本数据,也支持二进制数据上载. <%@ page language="

Springmvc file多附件上传 显示 删除操作

之前项目需求要做一个多附件上传 并显示上传文件 带删除操作 一筹莫展之际搜到某个兄弟发的博客感觉非常好用被我copy下来了此贴算是改良版 再次感谢(忘记叫什么了时间也有点久没有历史记录了)先上图 基于springmvc附件上传 所需jar包 commons.fileupload-1.2.0.jar commons.io-1.4.0.jar 这个是我使用的jar包有需要的可以直接百度网盘下载 里面有好几个版本 自行选择 放在lib下面 使用的话maven 直接下载也可以 链接:https://pa

基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

很久之前,当我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中如何使用这个组件进行文件上传的,当时上传文件的处理主要也是使用ashx一般处理程序来进行处理的.本文主要介绍我的Web开发框架中,在MVC4的环境中如何集成这个非常棒的文件上传组件的. 1.上传组件uploadify的说明及脚本引用 Uploadify 是 JQuery 一个著名的上传插件,利用 Flash