如何使用Javascript Ajax将文件与表单数据一起上传 [英] How to uplod a file alongwith form data using Javascript Ajax
本文介绍了如何使用Javascript Ajax将文件与表单数据一起上传的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想发送一个文件和其他表单数据。任何人都可以建议如何发送带有数据的文件。上传将在PHP中处理。
我的index.html代码如下：
< ！DOCTYPE HTML >
< html >
< head >
< script type = text / javascript >
function submitForm（）{
inputs = document .forms [ regForm]。elements;
var data = ;
for （ var i = 0 ; i< inputs.length; i ++）{
var name = inputs [i] .name;
var value = inputs [i] .value;
var type = inputs [i] .type;
if （type！= file ）{
if （i == 0 ）{
data = name + = + value;
}
其他 {
data = data + & + name + = + value;
}
}
}
var action = process.php;
var url = action + ？< /跨度> +数据;
var fileInput = document .forms [ regForm]。elements [ PIC];
var file = fileInput.files [ 0 ];
var xmlhttp;
if （ window .XMLHttpRequest）
{
xmlhttp = < span class =code-keyword> new XMLHttpRequest（）;
}
其他
{
xmlhttp = 新 ActiveXObject（ Microsoft.XMLHttp）;
}
xmlhttp。>
< / head >
< body>
< form name = regForm id = reg-form method = post action = process.php enctype = multipart / form-data>
用户名：< input type = text name = uname id = uname value = />
用户图片：< input type = file name = pic id = pic value = />
< input type = button name = 提交 id = 提交 value = 注册 onclick = javascript：submitForm（）;>
< / 表格 >
< div id = err> < / div >
< / 正文 >
< / html >
在process.php中，我只是显示输入和文件属性，这些属性将作为响应文本返回并显示在div iderr中。一旦我没有收到错误并显示在process.php中查询的所有属性，我可以继续进行任何进一步的处理。
process.php的代码：
if（isset（$ _ REQUEST [' submit']） && $ _REQUEST [' submit'] == 注册）{
echo $ uname = $ _ REQUEST [< span class =code-string>' uname'];
echo $ pic = $ _ FILES [' pic'] [' name'];
echo $ pic = $ _ FILES [' pic'] [' type'];
echo $ pic = $ _ FILES [' pic'] [' size'];
echo $ pic = $ _ FILES [' pic'] [' tmp_name'];
}
？>
解决方案
_REQUEST [' submit']）&&
_REQUEST [' submit'] == 注册）{
echo
uname =
I want to send a file alongwith other form data. Can any one suggest how to send file with data. Upload to be processed in PHP.
My code for index.html is below:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function submitForm(){
inputs = document.forms["regForm"].elements;
var data = "";
for (var i = 0; i < inputs.length; i++) {
var name=inputs[i].name;
var value=inputs[i].value;
var type=inputs[i].type;
if(type != "file"){
if(i == 0 ){
data = name+"="+value;
}
else{
data = data+"&"+name+"="+value;
}
}
}
var action="process.php";
var url = action+"?"+data;
var fileInput = document.forms["regForm"].elements["pic"];
var file=fileInput.files[0];
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
}
xmlhttp.>
</head>
<body>
<form name="regForm" id="reg-form" method="post" action="process.php" enctype="multipart/form-data">
User Name : <input type="text" name="uname" id="uname" value="" />
User Pic : <input type="file" name="pic" id="pic" value="" />
<input type="button" name="submit" id="submit" value="Register" onclick="javascript:submitForm();">
</form>
<div id="err"></div>
</body>
</html>
And in process.php am simply displaying the input and file attributes which will be returned as response text and displayed in div id "err". Once I receive no error and display all attribute queried in process.php I can continue with any further processing.
Code for process.php:
if(isset($_REQUEST['submit']) && $_REQUEST['submit'] == "Register"){
echo $uname=$_REQUEST['uname'];
echo $pic=$_FILES['pic']['name'];
echo $pic=$_FILES['pic']['type'];
echo $pic=$_FILES['pic']['size'];
echo $pic=$_FILES['pic']['tmp_name'];
}
?> 解决方案
_REQUEST['submit']) &&
_REQUEST['submit'] == "Register"){ echo
uname=
这篇关于如何使用Javascript Ajax将文件与表单数据一起上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
