其实这个的主要部分并不是一个jquery,但是必须使用到
php程序部分,也只需要这个一个php程序就可以了
www.corange.cn亲测
<?php
header("Content-Type: text/html; charset=utf-8");
@header( "Cache-Control: no-cache, must-revalidate" );
@header( "Pragma: no-cache" );
@header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
if($_GET['act']=='upload'){
if($_POST['upload']=='upload'){
$updir ='upload/';
$uploadfile = $uploaddir . basename($_FILES['file']['name']);
$_FILES['file']['name']=strtolower($_FILES['file']['name']);
$tmp_filename=explode(".",$_FILES['file']['name']);
if($tmp_filename[(count($tmp_filename)-1)]=='jpg' || $tmp_filename[(count($tmp_filename)-1)]=='jpeg'){
$up_filename=$updir.md5($_FILES['file']['name'].$_FILES['file']['size']).".".$tmp_filename[(count($tmp_filename)-1)] ;
if(move_uploaded_file($_FILES['file']['tmp_name'],$up_filename)){
list($width, $height, $type, $attr) = getimagesize($up_filename);
$f1="<img src='$up_filename' id='ImageDrag' width='150'>";
echo '<script language="javascript">parent.$("#ImageDragContainer").html("'.$f1.'");</script>';
echo "<script>parent.myform.bigpic.value=''</script>";//修改时候直接替换掉原数据
echo "<script>parent.myform.bigpic.value+='",$up_filename,",",$width,",",$height,"'</script>";
echo "<script>location.href='?act=upload'</script>";exit;
}else{
echo "<script>alert('图片上传失败!');location.href='?act=upload'</script>";exit;
}
}else{
echo "<script>alert('图片上传失败,请注意上传格式,只支持jpg格式图片!');location.href='?act=upload'</script>";exit;
}
}
?>
<body style="padding:0px;margin:0px;">
<div style="margin:0px;padding:0px;font-size:12px;">
<FORM ACTION="?act=upload" METHOD="POST" enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<input type="submit" name="button" id="button" value="上传" />
<input name="upload" type="hidden" id="upload" value="upload" /><input type="hidden" name="MAX_FILE_SIZE" value="3000000" />
</FORM>
</div>
</body>
<?php
exit;
}
?>
<!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>上传照片,上传后可以预览-www.corange.cn 网站开发代码</title>
<script src="js/jquery.pack.js"></script>
</head>
<body>
<form action="upload_ok.php" name="myform">
<table width="700" border="0" cellpadding="3" cellspacing="1">
<tr>
<td width="250" valign="top" bgcolor="#FFFFFF">
<div id="ImageDragContainer">
</div>
</td>
<td valign="top" bgcolor="#FFFFFF">
<br><br>
<iframe frameborder=0 style="width:350px;height:50px;padding:0px;border:0px;background:#fff" src="?act=upload"></iframe><textarea cols="60" name="bigpic" rows="1" id="IconContainer"></textarea>
</td>
</tr>
</table>
<input name="" type="submit" />
</form>
</html>
Jquery请自行下载后测试
Jquery请自行下载后测试 原文地址:http://www.corange.cn/archives/2010/04/3603.html
分享到:
相关推荐
在图片上传预览中,jQuery可以用来监听文件输入元素的变化,获取用户选择的图片,并实时显示预览效果。 要实现这一功能,你需要在HTML中创建一个`<input type="file">`元素,让用户选择图片。添加`change`事件监听...
本插件结合了PHP、jQuery和Ajax技术,提供了一种高效、用户友好的多图片上传解决方案。通过Ajax异步传输,用户可以在不刷新页面的情况下完成文件上传,提升用户体验。 首先,我们来了解一下这个系统的组成部分: 1...
【jQuery+PHP头像图片上传预览插件】是一个整合了前端jQuery库和后端PHP技术的实用工具,主要用于实现用户在选择头像时的实时预览、上传、编辑和删除功能。这款插件适用于各种需要用户上传个人形象照片的应用场景,...
在上传照片的过程中,jQuery可以帮助我们实现用户友好的交互,如实时预览、拖放上传等。例如,可以使用`$(document).ready()`来确保页面加载完成后再执行相关的上传和裁剪功能,使用`.on('change', 'input[type=file...
本篇文章将详细探讨如何使用jQuery实现多文件上传并提供预览效果。 首先,我们关注的核心是`blueimp-jQuery-File-Upload`这个库,它是jQuery的一个强大插件,专门用于文件上传。在`f6c5358`这个版本中,包含了完整...
在本文中,我们将深入探讨如何使用PHP和jQuery的Ajax技术实现文件即时上传和预览功能。这个主题主要涉及JavaScript库jQuery、jQuery Form Plugin以及PHP后端处理,这些都是现代Web开发中不可或缺的部分。以下是对每...
本篇文章将深入探讨如何使用jQuery、Ajax以及PHP实现异步文件上传,以实现无刷新页面的交互效果。 首先,jQuery是一个轻量级、功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在...
在IT领域,尤其是在Web开发中,用户界面的交互性至关重要,而"jQuery点击头像上传本地预览裁剪图片"就是一个提升用户体验的经典案例。这个功能允许用户在上传头像前预览并裁剪图片,提高了上传过程的可控性和便捷性...
在这个场景中,AJAX用于在用户选择图片后,通过后台处理预览和上传过程,提高用户体验,因为用户可以在不离开当前页面的情况下完成操作。 2. PHP (Hypertext Preprocessor): PHP是一种服务器端脚本语言,常用于...
在这个图片上传裁剪程序中,jQuery主要负责处理用户与页面的交互,例如监听文件输入元素的改变事件,获取用户选择的图片,以及更新预览区域的图像。此外,jQuery也可能用于实现拖拽裁剪框、调整裁剪大小等功能,提供...
《jQuery+PHP头像图片上传预览插件详解》 在网页开发中,用户交互体验是至关重要的,尤其是在涉及到文件上传,尤其是头像选择时,实时预览功能能极大提升用户体验。本文将深入探讨一个基于jQuery和PHP实现的头像...
本篇文章将详细讲解如何利用jQuery实现一个类似QQ照片上传功能的插件,以及相关的技术要点。 首先,让我们理解标题中的“jquery照片上传工具”。这个工具主要是用于网页上的图片上传功能,它允许用户选择本地图片并...
"PHP+jQuery+Ajax多图片上传"是一种常见的实现方式,它允许用户无刷新地批量上传图片,提供更好的用户体验。下面我们将详细讲解这个技术栈中的每个部分以及它们如何协同工作。 **PHP** 是一种广泛使用的服务器端...
在本场景中,我们关注的是"jquery上传后回显",即使用jQuery实现图片上传后即时在页面上显示已上传图片的功能。这通常涉及到前端的文件选择、Ajax异步上传、后端处理及返回数据,以及前端接收到返回结果后的图片渲染...
5. **前端反馈**:当用户上传头像后,前端需要实时更新预览图,并显示上传状态。这可以通过监听AJAX请求的状态改变来实现,例如使用`.done()`、`.fail()`和`.always()`方法处理成功、失败和完成的情况。 6. **安全...
jQuery Cropper还支持实时预览,用户可以即时看到裁剪后的效果。 实现jQuery图片裁切主要包括以下步骤: 1. 引入jQuery和jQuery Cropper的相关库。 2. 创建一个HTML元素(如`<img>`或`<canvas>`)作为图片显示区域...
本教程将深入探讨如何结合PHP和jQuery实现这一功能。PHP作为服务器端脚本语言,负责处理文件上传和保存,而jQuery作为客户端JavaScript库,提供用户友好的交互和动态图片裁切。 首先,我们需要在HTML页面上创建一个...