使用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 相关文章推荐
Javascript中call的两种用法实例
Dec 13 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
php 中的closure用法详解
2017/06/12 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
JS hashMap实例详解
2016/05/26 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
加拿大最大的书店:Indigo
2017/01/01 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
一套VC试题
2015/01/23 面试题
物流专业大学生的自我鉴定
2013/11/13 职场文书
公司承诺书格式范文
2015/04/28 职场文书
十月围城观后感
2015/06/08 职场文书
工作证明格式范文
2015/06/15 职场文书
个人更名证明
2015/06/23 职场文书