ajaxfileupload.php
<html>
<head>
<meta charset="utf-8">
<title>Ajax File Uploader Plugin For Jquery</title>
<link href="ajaxfileupload.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
var file_id = 'fileToUpload';
$("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php?file_id='+file_id,
secureuri:false,
fileElementId:file_id,
dataType: 'json',
data:{name:'logan', id:'id'},
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e)
{
alert(e);
}
}
)
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<h1>Ajax File Upload Demo</h1>
<p>Jquery File Upload Plugin - upload your files with only one input field</p>
<p>
need any Web-based Information System?<br> Please <a href="http://www.phpletter.com/">Contact Us</a><br>
We are specialized in <br>
<ul>
<li>Website Design</li>
<li>Survey System Creation</li>
<li>E-commerce Site Development</li>
</ul>
<img id="loading" src="loading.gif" style="display:none;">
<form name="form" action="" method="POST" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" class="tableForm">
<thead>
<tr>
<th>Please select a file and click Upload button</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td> </tr>
</tbody>
<tfoot>
<tr>
<td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
</tr>
</tfoot>
</table>
</form>
</div>
</body>
</html>
doajaxfileupload.php
<?php
$error = "";
$msg = "";
$fileElementName = $_GET['file_id'];
//上传文件类型列表
$uptypes=array(
'image/jpg',
'image/jpeg',
'image/png',
'image/pjpeg',
'image/gif',
'image/bmp',
'image/x-png',
'application/octet-stream',
'application/zip',
'application/x-zip-compressed'
);
if(!empty($_FILES[$fileElementName]['error']))
{
switch($_FILES[$fileElementName]['error'])
{
case '1':
$error = 'The uploaded file exceeds the upload_max_filesize directive in php.ini';
break;
case '2':
$error = 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form';
break;
case '3':
$error = 'The uploaded file was only partially uploaded';
break;
case '4':
$error = 'No file was uploaded.';
break;
case '6':
$error = 'Missing a temporary folder';
break;
case '7':
$error = 'Failed to write file to disk';
break;
case '8':
$error = 'File upload stopped by extension';
break;
case '999':
default:
$error = 'No error code avaiable';
}
}elseif(empty($_FILES[$fileElementName]['tmp_name']) || $_FILES[$fileElementName]['tmp_name'] == 'none')
{
$error = '没有找到文件..';
}else
{
//获取上传文件的后缀名
$filetype = pathinfo($_FILES[$fileElementName]["name"], PATHINFO_EXTENSION);
if(!in_array($_FILES[$fileElementName]["type"], $uptypes) && $filetype != 'rar') //文件类型过滤
//检查文件类型
{
$error = '文件类型不符合('.$_FILES[$fileElementName]["type"].')';
} else{
//重命名后缀名
$upName = time().'.'.$filetype;
$msg .= $upName;
//
move_uploaded_file($_FILES[$fileElementName]['tmp_name'],"./upload/" . $upName);
}
}
echo "{";
echo "error: '" . $error . "',\n";
echo "msg: '" . $msg . "'\n";
echo "}";
?>
相关推荐
而AJAX异步上传则不同，它通过JavaScript创建XMLHttpRequest对象，利用这个对象向服务器发送请求，然后在后台处理数据，最后将响应结果回传到客户端，整个过程不会刷新页面，提供更好的用户体验。 jQuery库为开发者...
至于提供的压缩包文件“package.xml”和“xhprof-0.9.2”，它们似乎与Ajax异步文件上传的主题不直接相关。“package.xml”可能是某种软件或项目的配置文件，而“xhprof-0.9.2”可能是一个性能分析工具，如PHP的...
Ajax异步上传文件是一种在网页上实现非刷新文件上传的技术，它通过JavaScript的Ajax技术与服务器进行通信，允许用户在不离开当前页面的情况下提交文件。这种方法极大地提升了用户体验，因为用户无需等待整个页面刷新...
综上所述，这个案例展示了如何结合HTML5的File API、AJAX和PHP来实现异步多文件上传功能。在实际应用中，应考虑安全性、性能优化以及用户体验的提升。通过学习和实践，开发者可以构建出更加高效、安全的文件上传系统...
在现代Web开发中，异步上传是提升用户体验的重要技术之一，尤其是在处理大文件或大量文件时。本篇文章将深入探讨如何使用jQuery、Ajax以及PHP实现异步文件上传，以实现无刷新页面的交互效果。 首先，jQuery是一个轻...
【PHP的AJAX技术实现文件异步上传】 在现代Web应用程序中，异步文件上传是一项常见且必要的功能，它允许用户在不刷新整个页面的情况下上传文件。然而，传统的XMLHttpRequest对象无法直接处理文件上传，因为它们不...
`ajaxfileupload.js` 是一个基于jQuery的插件，专门用于处理文件的异步上传，特别是图片。它简化了文件上传的复杂性，提供了回调函数，可以处理上传过程中的各种状态，如开始、进度、成功和失败。 要使用 `...
本教程主要讲解如何使用Ajax实现文件上传，并提供预览功能。 在“Ajax上传文件Demo”中，我们将探讨以下几个关键知识点： 1. **HTML表单设计**：首先，我们需要一个HTML表单让用户选择要上传的文件。`...
总的来说，"php+ajax文件上传"这个资源包提供了PHP后端和AJAX前端实现文件上传的实例，对于想要学习或改进文件上传功能的开发者来说非常有价值。通过研究这些代码，你可以了解如何实现无刷新的文件上传，提升Web应用...
ajax异步上传源码,后台servlet处理 改编自http://www.phpletter.com/Demo/AjaxFileUpload-Demo/ 这个后台是PHP版的,我把它改成了JAVA版的
本教程将探讨如何使用AJAX和PHP实现图片的异步上传，这样可以提高用户体验，因为用户无需刷新整个页面即可完成上传操作。 一、AJAX简介 AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个网页的情况下，...
**Ajax 文件异步上传工具详解** 在Web开发中，用户经常需要上传文件，例如图片、文档等。传统的文件上传方式通常会刷新整个页面，导致用户体验不佳。为了解决这一问题，Ajax技术结合jQuery库提供了文件异步上传的...
接下来，我们将深入探讨如何使用`ajaxSubmit`实现多文件异步上传： 1. **HTML准备**：创建一个支持多文件选择的`<input type="file">`元素，设置`multiple`属性允许用户选择多个文件。还可以使用Bootstrap来美化...
在现代Web开发中，"上传文件AJAX"是一项至关重要的技术，它允许用户在不刷新整个页面的情况下，通过异步方式上传文件。这种方式极大地提升了用户体验，因为它使得网页交互更加流畅和快速。AJAX（Asynchronous ...
【Ajax异步上传图片】是一种在不刷新整个页面的情况下，通过JavaScript实现文件上传的技术。它利用了Ajax（Asynchronous JavaScript and XML）的核心特性，即在后台与服务器进行数据交互，保持用户界面的持续响应和...
在这个过程中，JavaScript（通常使用jQuery库）在前端处理用户交互，AJAX负责异步通信，而PHP作为服务器端语言处理文件的接收和存储。 首先，让我们了解一下AJAX（Asynchronous JavaScript and XML）的基本概念。...
**Ajax异步上传图片技术详解** 在Web开发中，用户经常需要上传图片，早期的上传方式通常是表单提交，这会导致页面刷新，用户体验不佳。随着Ajax技术的发展，异步上传图片已经成为主流，它允许用户在不刷新页面的...
综上所述，"jQuery PHP 文件异步上传"涉及到前端的交互设计和后端的数据处理，通过jQuery的Ajax功能实现无刷新的文件上传，提供更好的用户体验，同时PHP在后端保证了数据的安全性和稳定性。理解并熟练掌握这些技术，...