使用jquery.form.js实现图片上传的方法


Posted in Javascript onMay 05, 2016

本文实例讲述了使用jquery.form.js实现图片上传的方法。分享给大家供大家参考,具体如下:

testupfile2.php

<?php
header('Content-type:text/html;charset=utf-8');
include_once 'includes/common.inc.php';
 if(!empty($_FILES['upfile'])){
 //文件格式
 $image=array('image/jpg',
   'image/jpeg',
   'image/png',
   'image/pjpeg',
   'image/gif',
   'image/bmp',
   'image/x-png'
 );
$updir=$_SERVER['DOCUMENT_ROOT'].$_config['g']['baseUrl'].'/attached/images/';
$upfile=$_FILES['upfile'];
$name=$upfile['name'];
$ext=substr($upfile['name'],strpos($upfile['name'],'.'));
$upname=md5(time().rand(1, 1000)).$ext;
$type=$upfile['type'];
$size=$upfile['size'];
$tmp_name=$upfile['tmp_name'];
$error=$upfile['error'];
$ok=0;
 foreach ($image as $key=>$value) {
 if($type==$value)$ok=1;
 }
 if($ok=='1' && $error=='0'){
 move_uploaded_file($tmp_name,$updir.$upname);
 //echo '<br>'.$tmp_name.'<br>'.$upname.'<br>'.$updir.'<br>'.$ext.'上传成功';
 //echo '上传成功';
 echo $upname;
 //$im=$updir.$upname;
 //echo $im;
 //echo '<img src='.$updir.$upname.' />';
 //$views->assign('image',$upname);
 //$views->display('default/testupfile.html');
 }
 else echo '上传失败2';
}
else echo '上传失败1';
?>

testupfile.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<!--{$baseUrl}-->/scripts/jquery.js"></script>
<script type="text/javascript" src="<!--{$baseUrl}-->/scripts/jquery.form.js"></script>
<script type="text/javascript">
$(function(){
 //jquery.form image1
 $("#upimage").bind("click",function(){
 if($("#upfile").val()==""){
  alert("请选择一个图片文件,再点击");
  return;
 }
 $("#form1").ajaxSubmit({
  url:"testupfile2.php",
  type:"POST",
  //date:"upfile=upfile",
  success:function(response){
  alert(response);
  $("#ln").empty();
  $("#ln").append("<img src='<!--{$baseUrl}-->/attached/images/"+response+"' width='100' height='60'/>");
  $("#im1").val(response);
  },
  error:function(msg){
  alert("出错了");
  }
 });
 });
 //jquery.form image2
 $("#upimage2").bind("click",function(){
 if($("#upfile2").val()==""){
  alert("请选择一个图片文件,再点击2");
  return;
 }
 $("#form2").ajaxSubmit({
  url:"testupfile2.php",
  type:"POST",
  //date:"upfile=upfile2",
  success:function(response2){
  alert(response2);
  $("#ln2").empty();
  $("#ln2").append("<img src='<!--{$baseUrl}-->/attached/images/"+response2+"' width='100' height='60'/>");
  $("#im2").val(response2);
  },
  error:function(msg){
  alert("出错了");
  }
 });
 });
});
</script>
</head>
<body>
文件上传
<form enctype="multipart/form-data" id="form1" method="post" action="">
文件:
 <input type="file" name="upfile" id="upfile"><input type="button" id="upimage" value="图片上传1">
 <input type="text" name="im1" id="im1" value="" />
</form>
<form enctype="multipart/form-data" id="form2" method="post" action="">
文件:
 <input type="file" name="upfile" id="upfile2"><input type="button" id="upimage2" value="图片上传2">
 <input type="text" name="im2" id="im2" value="" />
</form>
<div id="ln">tu</div><br>
<div id="ln2">tu2</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
js判断是否是手机页面
Mar 17 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
js禁止表单重复提交
Aug 29 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 #Javascript
浅析JS异步加载进度条
May 05 #Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 #Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 #Javascript
一分钟理解js闭包
May 04 #Javascript
学JavaScript七大注意事项【必看】
May 04 #Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 #Javascript
You might like
PHP中余数、取余的妙用
2015/06/29 PHP
php简单日历函数
2015/10/28 PHP
PHP getName()函数讲解
2019/02/03 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
Python科学计算环境推荐——Anaconda
2014/06/30 Python
python正则实现提取电话功能
2018/02/24 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
python读取xml文件方法解析
2020/08/04 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
大学生实习证明范本
2014/09/19 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
公司宣传语大全
2015/07/13 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python
Win10 Anaconda安装python-pcl
2022/04/29 Servers