使用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 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
XML的代替者----JSON
Jul 21 Javascript
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
javascript常见用法总结
May 22 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
探讨: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之curl设置超时实例
2014/11/03 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
应届生高等护理求职信
2013/10/12 职场文书
管理科学大学生求职信
2013/11/13 职场文书
甜点店创业计划书
2014/01/27 职场文书
县级文明单位申报材料
2014/05/23 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
党代会心得体会
2014/09/04 职场文书
就业协议书怎么填
2014/09/15 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
尼克胡哲观后感
2015/06/08 职场文书
2016国培研修心得体会
2016/01/08 职场文书
感谢信
2019/04/11 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS