使用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 设置文本框中焦点的位置
Nov 20 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 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
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
webpack入门必知必会
2017/01/16 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
python使用socket向客户端发送数据的方法
2015/04/29 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
django 外键model的互相读取方法
2018/12/15 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
国际领先的学术出版商:Springer
2017/01/11 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
歌唱比赛获奖感言
2014/01/21 职场文书
元旦获奖感言
2014/03/08 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
经理聘任证明
2015/03/02 职场文书
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL