phpajax文件上传
A. php上传图片那个怎么做到前台直接提示上传成功的啊ajax 怎么得到上传的临时文件名
上传图片这个处理有几个思路：
1、使用form提交到当前页面的iframe（空内容）中。
2、使用form提交数据到使用js新建的iframe里。
3、直接通过js新建form、新建iframe，提交、接收服务器端返回的响应。（这个网上找的插件可以看到，如fileuploader）
4、使用FormData对象（有些浏览器不兼容）
获取临时文件名，只需执行提交后echo 数据出来，前台接收到即可。
B. PHP 如何用ajax做文件上传
通过传统的form表单提交的方式上传文件：
[html] view plain 在CODE上查看代码片派生到我的代码片<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的方式进行请求：
[javascript] view plain 在CODE上查看代码片派生到我的代码片$.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);}
});
通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。
通过$('#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/FormDataConstructor
FormData()
想得到一个FormData对象：
var formdata = new FormData();
W3c草案提供了三种方案来获取或修改FormData。
方案1：创建一个空的FormData对象，然后再用append方法逐个添加键值对：
var formdata = new FormData();
formdata.append("name", "呵呵");
formdata.append("url", "http://www..com/");方案2：取得form元素对象，将它作为参数传入FormData对象中！
var formobj = document.getElementById("form");var formdata = new FormData(formobj);
方案3：利用form元素对象的getFormData方法生成它！
var formobj = document.getElementById("form");var formdata = formobj.getFormData()
Method
FormData.append
本方法用于向已存在的键添加新的值，如该键不存在，新建之。
语法
formData.append(name, value);
formData.append(name, value, filename);
注: 通过 FormData.append()方法赋给字段的值若是数字会被自动转换为字符(字段的值可以是一个Blob对象,一个File对象,或者一个字符串,剩下其他类型的值都会被自动转换成字符串).
参数解释
name
键 (key)， 对应表单域
value
表单域的值
filename (optional)
The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is "blob".
FormData.delete
将一对键和值从 FormData 对象中删除。
formData.delete(username);
FormData.get
返回给定键的第一个值
formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.get(username); // "Justin"
FormData.getAll
返回给定键的所有值
formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.getAll(username); // ["Justin", "Chris"]
FormData.has
检查是否包含给定键，返回 true 或 false
formData.has(username);
FormData.set
设置给定键的值
formData.set(name, value);
formData.set(name, value, filename);
浏览器兼容情况
来自 MDN：
Desktop
FeatureChromeFirfox(Gecko)Intenet ExplorerOperaSafariBasic support7+4.0(2.0)10+12+5+
append with filename(Yes)22.0(22.0)???
delete, get, getAll, has, setBehind FlagNot supportedNot supported(Yes)Not supportedMobile
FeatureAndroidChrome AndroidFirfox Mobile (Gecko)Firfox OS (Gecko)IE MobileOpera MobileSafari MobileBasic support3.0?4.0(2.0)1.0.1?12+?
append with filename??22.0(22.0)1.2???
delete, get, getAll, has, set(Yes)(Yes)Not supportedNot supportedNot supported(Yes)Not supported2015年06月04日发布
Ajax通过FormData上传文件
1.使用<form>表单初始化FormData对象方式上传文件HTML代码
<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form>
javascript代码
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
这里要注意几点：
processData设置为false。因为data值是FormData对象，不需要对数据做处理。
<form>标签添加enctype="multipart/form-data"属性。
cache设置为false，上传文件不需要缓存。
contentType设置为false，不设置contentType值，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。
上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为<input>中声明的是name="file"。
如果不是用<form>表单构造FormData对象又该怎么做呢？
2.使用FormData对象添加字段方式上传文件
HTML代码
<div id="uploadForm">
<input id="file" type="file"/>
<button id="upload" type="button">upload</button>
</div>
这里没有<form>标签，也没有enctype="multipart/form-data"属性。
javascript代码
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
这里有几处不一样：
append()的第二个参数应是文件对象，即$('#file')[0].files[0]。
contentType也要设置为‘false’。
从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件，只需要在<input type="file">里添加multiple或multiple="multiple"属性。
3.服务器端读文件
从Servlet 3.0 开始，可以通过 request.getPart() 或 request.getPars() 两个接口获取上传的文件。
C. ajax如何 实现 文件上传
程序说明
使用说明
实例化时，第一个必要参数是file控件对象：
newQuickUpload(file);
第二个可选参数用来设置系统的默认属性，包括
属性: 默认值//说明
parameter:{},//参数对象
action:"",//设置action
timeout:0,//设置超时(秒为单位)
onReady:function(){},//上传准备时执行
onFinish:function(){},//上传完成时执行
onStop:function(){},//上传停止时执行
onTimeout:function(){}//上传超时时执行
还提供了以下方法：
upload：执行上传操作；
stop：停止上传操作；
dispose：销毁程序。
varQuickUpload=function(file,options){
this.file=$$(file);
this._sending=false;//是否正在上传
this._timer=null;//定时器
this._iframe=null;//iframe对象
this._form=null;//form对象
this._inputs={};//input对象
this._fFINISH=null;//完成执行函数
$$.extend(this,this._setOptions(options));
};
QuickUpload._counter=1;
QuickUpload.prototype={
//设置默认属性
_setOptions:function(options){
this.options={//默认值
action:"",//设置action
timeout:0,//设置超时(秒为单位)
parameter:{},//参数对象
onReady:function(){},//上传准备时执行
onFinish:function(){},//上传完成时执行
onStop:function(){},//上传停止时执行
onTimeout:function(){}//上传超时时执行
};
return$$.extend(this.options,options||{});
},
//上传文件
upload:function(){
//停止上一次上传
this.stop();
//没有文件返回
if(!this.file||!this.file.value)return;
//可能在onReady中修改相关属性所以放前面
this.onReady();
//设置iframe,form和表单控件
this._setIframe();
this._setForm();
this._setInput();
//设置超时
if(this.timeout>0){
this._timer=setTimeout($$F.bind(this._timeout,this),this.timeout*1000);
}
//开始上传
this._form.submit();
this._sending=true;
},
//设置iframe
_setIframe:function(){
if(!this._iframe){
//创建iframe
variframename="QUICKUPLOAD_"+QuickUpload._counter++,
iframe=document.createElement($$B.ie?"<iframename=""+iframename+"">":"iframe");
iframe.name=iframename;
iframe.style.display="none";
//记录完成程序方便移除
varfinish=this._fFINISH=$$F.bind(this._finish,this);
//iframe加载完后执行完成程序
if($$B.ie){
iframe.attachEvent("onload",finish);
}else{
iframe.onload=$$B.opera?function(){this.onload=finish;}:finish;
}
//插入body
varbody=document.body;body.insertBefore(iframe,body.childNodes[0]);
this._iframe=iframe;
}
},
//设置form
_setForm:function(){
if(!this._form){
varform=document.createElement('form'),file=this.file;
//设置属性
$$.extend(form,{
target:this._iframe.name,method:"post",encoding:"multipart/form-data"
});
//设置样式
$$D.setStyle(form,{
padding:0,margin:0,border:0,
backgroundColor:"transparent",display:"inline"
});
//提交前去掉form
file.form&&$$E.addEvent(file.form,"submit",$$F.bind(this.dispose,this));
//插入form
file.parentNode.insertBefore(form,file).appendChild(file);
this._form=form;
}
//action可能会修改
this._form.action=this.action;
},
//设置input
_setInput:function(){
varform=this._form,oldInputs=this._inputs,newInputs={},name;
//设置input
for(nameinthis.parameter){
varinput=form[name];
if(!input){
//如果没有对应input新建一个
input=document.createElement("input");
input.name=name;input.type="hidden";
form.appendChild(input);
}
input.value=this.parameter[name];
//记录当前input
newInputs[name]=input;
//删除已有记录
deleteoldInputs[name];
}
//移除无用input
for(nameinoldInputs){form.removeChild(oldInputs[name]);}
//保存当前input
this._inputs=newInputs;
},
//停止上传
stop:function(){
if(this._sending){
this._sending=false;
clearTimeout(this._timer);
//重置iframe
if($$B.opera){//opera通过设置src会有问题
this._removeIframe();
}else{
this._iframe.src="";
}
this.onStop();
}
},
//销毁程序
dispose:function(){
this._sending=false;
clearTimeout(this._timer);
//清除iframe
if($$B.firefox){
setTimeout($$F.bind(this._removeIframe,this),0);
}else{
this._removeIframe();
}
//清除form
this._removeForm();
//清除dom关联
this._inputs=this._fFINISH=this.file=null;
},
//清除iframe
_removeIframe:function(){
if(this._iframe){
variframe=this._iframe;
$$B.ie?iframe.detachEvent("onload",this._fFINISH):(iframe.onload=null);
document.body.removeChild(iframe);this._iframe=null;
}
},
//清除form
_removeForm:function(){
if(this._form){
varform=this._form,parent=form.parentNode;
if(parent){
parent.insertBefore(this.file,form);parent.removeChild(form);
}
this._form=this._inputs=null;
}
},
//超时函数
_timeout:function(){
if(this._sending){this._sending=false;this.stop();this.onTimeout();}
},
//完成函数
_finish:function(){
if(this._sending){this._sending=false;this.onFinish(this._iframe);}
}
}
D. 我做php的，ajax传值乱码，乱码都是这种方式：%u5BB4，以%u开头的！请问怎么解决呀
JQuery在Ajax提交出现中文乱码的解决办法：
因为编码的原因
可能存在以下几点原因：
1.HTML的编码不统一：如页面用的GB2312，好像JQuery对它支持不太好。以前我一直都是用UTF-8的，一直都没有发现；
2.文件的编码，这个不好在
表面上看到，简体中文版的操作系统存的文本格式的文件默认是 GB2312，建议把文件换成UTF-8格式的
最简单的解决办法，把提交的中文文本用 JS的 escape 处理一下，就不会现出现乱码了。
如：
//保存数据
$.ajax({
url:"/guide/savecomments.aspx" ,
type:"POST" ,
dataType:"json" ,
data:"Action=SaveComment&CommNickName=" +escape
(CommNickName.val()) + "&CommContent=" +escape(CommContent.val()) + "&GuideID=" + GuideID.val() + "&ScoreLogType=<%=ScoreLogType %>",
success:function
(results){
alert(results.message);
}
});
E. 大神，ThinkPHP 上传文件进度条怎么实现的
Web Uploader
这个插件是网络出的，有进度条，兼容ie7及以上。
原理就是ajax上传，会返回1-100的数值，根据这个值来操作进度条。如果还有不明白的话，你可以在后盾人看看视频找找答案，有空多看看时间长了，慢慢就明白了，希望能帮到你，给个采纳吧谢谢
F. php 使用ajaxfileupload无法接收文件
既然你都在php页面打印$_FILE没有值说明没有数据上传到php文件。
ajax上传文件:
$(document).ready(function(){
$('#test').click(function(){
$.ajaxFileUpload({
url:'接收路径',
secureuri:false,
fileElementId:'file',
dataType:'text',//返回数据类型
success:function(data,status){
//alert(data);
$("#img").attr("src","图片地址
);
},
error:function(data,status,e)//服务器响应失败处理函数
{
alert(e);
}
});
//$('#upload').submit();
});
});
G. html中input上传图片什么原理啊php后台怎么处理如果用ajax的话是传些什么
用input上传图片是把图片作为文件传输的，在php后台中使用 $_FILES来接收。
注意：前端的form表单除了action ,method 属性外，还要添加一个'enctype'属性，否则文件传输不成功。
<form enctype="multipart/form-data">
<input type="file" >
</form>
$_FILES接收信息 有几个属性：
name , 上传的文件名称
size ,上传的文件大小
tmp_name ,临时路径
type ,文件类型
error错误提示
error取值说明：
( 0:没问题。1/2：大小超过限制[1->超出php.ini限制。2->超出文件域max_file限制]。3：只上传部分附件(不好测试）。4：没有上传附件）
有上传信息时：$_FILES接收到的附件信息：
保存附件：把上传的文件由临时路径保存到真实的图片存储的位置。
move_uploaded_file(临时路径名附件，真实路径名附件）
H. 一个php表单中先上传文件然后获取路径通过表单上传到数据库
//不要把这个问题想的太复杂,上传文件跟其他数据完全可以一起提交到服务器，为什么一定要先上传图片，返回结果再提交其他字段呢，这不是给自己找麻烦吗：
<formactionmethod='post'>
<inputname='username'type='text'/>
<inputtype='file'name='image'/>
<inputtype='submit'name='submit'/>
<form>
Server.php:
$file=$_FILES['image'];这个就是你上传的文件,先保存在服务器,再和其他字段一起保存到数据库即可
$username=$_POST['username'];
$sql=//...
I. php上传文件如何实现上传头像的时候可以显示出头像
两种方案：
前端直接使用 FileReader可以直接读取图片在前端显示，可以在用户点击确定后再通过 ajax上传到后端（当然，你也可以直接通过 form表单 submit提交)
用户点击上传文件的时候，直接用 ajax把图片是传到后端，后端回传图片在服务器中的地址，前端把这个图片显示出来。
J. ajax+html实现文件上传有哪几种方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>大文件切割上传</title>
<link rel="stylesheet" href="">
<script>
function selfile(){
const LENGTH = 1024 * 1024 * 10;//每次上传的大小
var file = document.getElementsByName('video')[0].files[0];//文件对象
var filename=document.getElementsByName('video')[0].files[0].name;
var totalSize = file.size;//文件总大小
var start = 0;//每次上传的开始字节
var end = start + LENGTH;//每次上传的结尾字节
var fd = null//创建表单数据对象
var blob = null;//二进制对象
var xhr = null;//xhr对象
while(start < totalSize){
fd = new FormData();//每一次需要重新创建
xhr = new XMLHttpRequest();//需要每次创建并设置参数
xhr.open('POST','upload.php',false);
blob = file.slice(start,end);//根据长度截取每次需要上传的数据
fd.append('video',blob);//添加数据到fd对象中
fd.append('filename',filename); //获取文件的名称
xhr.send(fd);//将fd数据上传
//重新设置开始和结尾
start = end;
end = start + LENGTH;
}
}
</script>
</head>
<body>
<h1>大文件切割上传</h1>
<input type="file" name="video" onchange="selfile();" />
</body>
</html>