html5-php的ajax文件上传实现

-----------------------------------form.html---------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

<script type="text/javascript">

function send(){

var pic = document.getElementsByTagName(‘input‘)[0].files[0];

var fd = new FormData();

fd.append(‘pic‘,pic);

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function(){

if( this.readyState == 4 && this.status == 200 ){

document.getElementById(‘info‘).innerHTML = this.responseText;

}

}

xmlhttp.open(‘POST‘,‘upload.php‘,true);

xmlhttp.send(fd);

}

</script>

</head>

<body>

<div id="info"></div>

<form action="">

<input type="file" onchange="send()" />

</form>

</body>

</html>

--------------------------------------upload.php-------------------------------------

<?php

if(move_uploaded_file($_FILES[‘pic‘][‘tmp_name‘],‘./upload/‘.$_FILES[‘pic‘][‘name‘] )){

echo ‘上传成功 ‘;

}else{

echo ‘上传失败‘;

}

?>

html5-php的ajax文件上传实现

时间: 2024-10-06 00:04:41

html5-php的ajax文件上传实现的相关文章

AJAX文件上传实践与分析,带HTML5文件上传API。

对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可能实现的,因为浏览器的原因,AJAX根本获取不了文件信息,当然这里并不是说就不能文件上传了,只是说在AJAX2.0之前所谓的AJAX文件上传都是假冒的,核心更本没有用AJAX,而是利用iframe实现的,下面我们来看看如何利用iframe实现页面无刷新上传文件. iframe无刷新上传文件版. ht

HTML5开发 拖拽文件上传

Drag&Drop 拖拽功能的处理 关于HTML5拖拽文件上传,其实国外已经有很多网站有这样的应用,最早推出拖拽上传应用的是 Gmail,它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送,但其实现在利用HTML5的功能实现,主要借助于新版支持的浏览器来实现,IE还是弱很多. 拖拽上传应用主要使用了以下 HTML5技术: Drag&Drop : HTML5基于拖拽的事件机制.File API : 可以很方便的让 Web 应用访问文件对象,File API 包括FileList.Bl

使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的ajax $.ajax({ url:"${pageContext.request.contextPath}/public/testupload", type:"post", data:{username:username},

Ajax文件上传组件

项目中经常需要文件上传,每次都要重复造轮子,所以决定将文件上传做成组件,方便使用.效果如图: 自我感觉效果还是可以的,而且使用的代码也变得十分清晰,前端的html代码非常简洁,如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <link href = "fileuploader.css&quo

【Jsp】使用AjaxFileUploader与jspsmartupload完成不刷新的Ajax文件上传系统

这个不刷新的Ajax文件上传系统同样可以用来做预览图 虽然预览图完全可以通过不上传图片就完成,但是不刷新的Ajax文件上传系统可以做到上传完图片立即返回上传结果给用户的结果 上次在<[Jsp]使用jspsmartupload完成简单的文件上传系统>(点击打开链接)一文中完成了一个简单的文件上传系统 但是这个文件上传系统过于传统, 上传完文件之后需要跳转到另外一个页面中提交表单,处理表单,然后再提供一个"返回"按钮给用户 如果用户要求上传之后,马上看到图片,并且不跳转,只好利

Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script type="text/javascript" src="js/jquery.js"></script> <meta charset="utf-8" /> <style type="text/css&qu

Javascript Fromdata 与jQuery 实现Ajax文件上传

<!DOCTYPE html> <html> <head> <title>ajax</title> <script type="text/javascript" src="js/jquery.js"></script> <meta charset="utf-8" /> <style type="text/css"> fo

兼容ie的jquery ajax文件上传

Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对于Ajax文件上传,大体是有: 1.创建一个input type="file" 的文件上传按钮,根据其id监听绑定其change事件,在事件中用jquery创建一个iframe,嵌入添加隐藏form,同时创建input type="file",id相同的文件上传按钮,并

iframe实现Ajax文件上传效果示例

<!doctype html> <html> <head> <meta charset=utf-8> <head> <title>ajax 文件上传~~</title> </head> <script> window.onload=function(){ var form=document.getElementsByTagName('form')[0]; form.onsubmit=function

jQuery插件AjaxFileUpload实现ajax文件上传时老是执行error方法 问题原因

今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是执行error,无法执行succes方法,追踪ajaxfileupload.js源码发现: 当执行if(type=="json")    eval("data = "+data);会抛出异常,导致在处理异常的时候将status = "error" 因此一直执行error方法. 上网查询,得知eval函数是用来执行一段js代码,而并不是如我所想的反