index.php
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax异步上传图片</title>
<script src="js/jquery-1.4.2.js" language="JavaScript" type="text/javascript"></script>
<script src="js/jquery.form.js" language="JavaScript" type="text/javascript"></script>
<script type="text/javascript">
function sky_upfiles(){
var messtxt;
$("#sky_upform").ajaxSubmit({
//dataType:'script',
type:'post',
url: "doupfiles.php",
beforeSubmit: function(){
$("#sky_txt").html("图片上传中...");
},
success: function(data){
if(data=="1"){
messtxt = "上传成功！";
}else if(data=="-1"){
messtxt = "文件超过规定大小！";
}else if(data=="-2"){
messtxt = "文件类型不符!";
}else if(data=="-3"){
messtxt = "移动文件出错!";
}else{
messtxt = "未知错误!";
}
$("#sky_txt").html(messtxt);
//$("#sky_txt").append(data);
},
resetForm: false,
clearForm: false
});
//$("#upimgform").submit();
}
</script>
</head>
<body>
<br />
<fieldset style="width:97%">
<legend>上传文件</legend>
<form enctype="multipart/form-data" id="sky_upform" name="sky_upform" action="" method="post">
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td width="100" align="right" class="f-12"></td>
<td class="f-12" align="left">
<input name="upfile" id="upfile" maxlength="20" size="40" type="file" value="" /><input name="upmit" type="button" id="upmit" value="上传" onclick="sky_upfiles()"/>
<font color="red" id="sky_txt"></font></td>
</tr>
</form>
</body>
</html>
doupfiles.php
<?php
/*
* 1:成功上传
*-1:文件超过规定大小
*-2:文件类型不符
*-3:移动文件出错
*/
if(is_uploaded_file($_FILES['upfile']['tmp_name'])){
$photo_types=array('image/jpg', 'image/jpeg','image/png','image/pjpeg','image/gif','image/bmp','image/x-png');//定义上传格式
$max_size=700000; //上传照片大小限制,默认700k
$photo_folder="upload/".date("Y")."/".date("m")."/".date("d")."/"; //上传照片路径
///////////////////////////////////////////////////开始处理上传
if(!file_exists($photo_folder))//检查照片目录是否存在
{
mkdir($photo_folder, 0777, true); //mkdir("temp/sub, 0777, true);
}
$upfile=$_FILES['upfile'];
$name=$upfile['name'];
$type=$upfile['type'];
$size=$upfile['size'];
$tmp_name=$upfile['tmp_name'];
$file = $_FILES["upfile"];
$photo_name=$file["tmp_name"];
//echo $photo_name;
$photo_size = getimagesize($photo_name);
if($max_size < $file["size"])//检查文件大小
echo "-1"; //echo "<script>alert('对不起，文件超过规定大小!');history.go(-1);</script>";
if(!in_array($file["type"], $photo_types))//检查文件类型
echo "-2"; //echo "<script>alert('对不起，文件类型不符!');history.go(-1);</script>";
if(!file_exists($photo_folder))//照片目录
mkdir($photo_folder);
$pinfo=pathinfo($file["name"]);
$photo_type=$pinfo['extension'];//上传文件扩展名
$photo_server_folder = $photo_folder.time().".".$photo_type;//以当前时间和7位随机数作为文件名，这里是上传的完整路径
if(!move_uploaded_file ($photo_name, $photo_server_folder))
{
echo "-3"; //echo "移动文件出错";
exit;
}
$pinfo=pathinfo($photo_server_folder);
$fname=$pinfo['basename'];
echo "1"; //echo " 已经成功上传：".$photo_server_folder."<br />";
}
?>
效果图：
相关推荐
这个功能在现代Web应用中非常常见，它允许用户无需刷新页面就能上传图片，提高用户体验。 首先，我们需要理解jQuery的AjaxSubmit插件。这是一个用于表单提交的jQuery插件，它允许我们以Ajax方式处理表单数据，从而...
在现代Web开发中，异步上传是提升用户体验的重要技术之一，尤其是在处理大文件或大量文件时。本篇文章将深入探讨如何使用jQuery、Ajax以及PHP实现异步文件上传，以实现无刷新页面的交互效果。 首先，jQuery是一个轻...
在IT行业中，jQuery是一个非常流行的JavaScript库...总的来说，"jQuery批量上传图片插件"是一个实用的工具，它结合了jQuery的便利性和文件上传的复杂性，为Web开发人员提供了一个快速实现批量图片上传功能的解决方案。
本主题围绕“基于jQuery的异步上传文件插件，使用了HTML5的FormData对象”展开，我们将深入探讨HTML5的FormData对象、jQuery在文件上传中的作用以及如何实现异步文件上传。 首先，HTML5的FormData对象是处理表单...
本文将深入探讨“jQuery异步提交form表单”这一主题，结合给出的标签“源码”和“工具”，我们将分析相关源码，并提供实际应用中的指导。 在传统的HTML表单提交过程中，页面会跳转到服务器返回的结果页面，这在用户...
本插件结合了PHP、jQuery和Ajax技术，提供了一种高效、用户友好的多图片上传解决方案。通过Ajax异步传输，用户可以在不刷新页面的情况下完成文件上传，提升用户体验。 首先，我们来了解一下这个系统的组成部分： 1...
总的来说，Uploadify结合jQuery提供了强大的图片异步上传解决方案，无论是在大型的Web应用还是小型的个人项目中，都是一个值得信赖的工具。通过熟练掌握和应用Uploadify，开发者可以轻松地实现高效、稳定且具有良好...
总之，图片异步上传预览和分页是现代Web应用的重要特性，它们结合了HTML5的File API、jQuery的便利性、Ajax的异步通信以及分页策略。通过理解和掌握这些技术，开发者可以构建出高效、友好的用户界面。
这种方式允许用户在不刷新整个页面的情况下，上传图片或其他文件，提升了用户体验。这里我们关注的是一个基于PHP、HTML和Ajax实现的异步图片上传的示例项目，即"php+js异步图片上传demo"。 首先，我们需要理解异步...
总的来说，"jQuery+PHP上传剪裁照片工具"是一个实用的Web应用组件，它结合了前端的动态性和后端的处理能力，为用户提供了一站式的图片上传和裁剪解决方案。无论是个人项目还是企业级应用，都能从中受益，提升网站的...
批量上传的核心在于利用 jQuery 的 Ajax 功能，结合 FormData 对象来发送文件数据。在用户选择文件后，我们可以监听 `change` 事件，读取选中的文件，并使用 FormData 封装它们： ```javascript $("#fileInput").on...
它利用Flash实现了多文件选择和异步上传，结合CSS进行界面定制，通过JavaScript处理用户交互和服务器通信。服务器端的PHP脚本处理上传文件的实际存储和验证，确保上传过程的安全和有效性。对于开发者而言，理解这些...
同时，jQuery还负责绑定上传按钮的点击事件，触发文件的上传操作，通常会结合Ajax异步提交，保持页面的流畅性。 在后端部分，PHP主要处理图片的接收、存储以及可能的图片处理任务，如大小调整、格式转换等。当前端...
3. **上传图片**：使用Ajax技术，将图片数据发送到服务器，无需刷新页面。 4. **进度反馈**：在上传过程中，提供上传进度信息，提升用户体验。 5. **错误处理**：处理可能出现的网络问题或服务器响应错误。 对于...
"iframe异步上传"技术就是为了解决这个问题而出现的一种解决方案。这种技术结合了HTML的`<iframe>`元素和JavaScript，使得文件能够后台静默上传，不影响用户在页面上的其他操作。 首先，我们要理解什么是`<iframe>`...
在多图片上传中，jQuery用于监听文件输入元素的变化，获取用户选择的图片，然后使用Ajax发起异步上传请求。 3. **Ajax**：AJAX（Asynchronous JavaScript and XML）允许在不刷新整个页面的情况下与服务器交换数据并...
总结，通过结合PHP和jQuery插件ajaxFileUpload，我们可以创建一个兼容手机的异步文件上传功能，使得用户在不离开当前页面的情况下即可完成文件上传，提高了用户体验。同时，通过PHP处理文件上传请求，可以进行必要的...
对于“jQuery 上传图片显示”这一主题，我们主要探讨如何使用 jQuery 实现用户选择图片后在页面上即时预览的功能。这涉及到文件输入元素、JavaScript 事件处理、图片的 Base64 编码以及可能的 AJAX 上传等技术。 ...
总结来说，结合jQuery和PHP实现图片上传预览，主要涉及前端的文件读取和预览，以及后端的文件接收和处理。通过JavaScript监听文件选择事件，实现实时预览；通过PHP接收文件，进行验证和存储，并可进行图像处理，如...