脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery.form.js图片上传

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

 更新时间：2016年05月05日 10:31:37   作者：314756557  
这篇文章主要介绍了使用jquery.form.js实现图片上传的方法,涉及jquery使用表单插件jquery.form.js进行图片上传的提交、类型验证、执行结果回调显示等技巧,非常简单实用,需要的朋友可以参考下

本文实例讲述了使用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相关内容感兴趣的读者可查看本站专题：《jQuery form操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

您可能感兴趣的文章:

相关文章

  • Jquery中CSS选择器用法分析

    Jquery中CSS选择器用法分析

    这篇文章主要介绍了Jquery中CSS选择器用法,实例分析了jQuery中常用的5种css选择器的使用技巧,需要的朋友可以参考下
    2015-02-02
  • jquery实现华丽的可折角广告代码

    jquery实现华丽的可折角广告代码

    这篇文章主要介绍了jquery实现华丽的可折角广告代码,涉及jquery鼠标hover事件动态操作页面元素样式的技巧,可用于页面增加广告的视觉效果,需要的朋友可以参考下
    2015-09-09
  • jquery ajax属性async(同步异步)示例

    jquery ajax属性async(同步异步)示例

    在jquery的ajax中如果我们希望实现同步或者异步我们可以直接设置async发生为真或假即可true false，下面举几个jquery ajax同步和异步实例
    2013-11-11
  • 40款非常有用的 jQuery 插件推荐（系列一）

    40款非常有用的 jQuery 插件推荐（系列一）

    jQuery 是一个非常优秀的 JavaScript 框架，在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入一些非常好的效果，让网站有更好的可用性和用户体验
    2011-12-12
  • jQuery插件scroll实现无缝滚动效果

    jQuery插件scroll实现无缝滚动效果

    今天给大家分享一款页面无缝滚动的jquery.scroll插件。 支持上下左右，淡入淡出，滚动时间设置，动画时间设置，鼠标经过是否停止设置，滚动鼠标液动条看下页面的切换效果。该插件适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。
    2015-04-04
  • IE下使用jQuery重置iframe地址时内存泄露问题解决办法

    IE下使用jQuery重置iframe地址时内存泄露问题解决办法

    这篇文章主要介绍了IE下使用jQuery重置iframe地址时内存泄露问题解决办法,需要的朋友可以参考下
    2015-02-02
  • 解析jquery中的ajax缓存问题

    解析jquery中的ajax缓存问题

    现在我要在浏览器里读取缓存，因为ajax请求的数据很大，请求一次就够了。但是问题来了，在FF里面，是没有ajax缓存的，也就是每次都会触发ajax请求，这点和IE不一样
    2013-12-12
  • JQUERY对单选框(radio)操作的小例子

    JQUERY对单选框(radio)操作的小例子

    在aspx文件中使用一个RadioButtonList控件显示两个radio标签。表示一对选中状态：
    2013-04-04
  • jQuery中通过ajax的get()函数读取页面的方法

    jQuery中通过ajax的get()函数读取页面的方法

    这篇文章主要介绍了jQuery中通过ajax的get()函数读取页面的方法,需要的朋友可以参考下
    2016-02-02
  • JQuery入门——事件切换之hover()方法应用介绍

    JQuery入门——事件切换之hover()方法应用介绍

    谓切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换,有两个方法用于事件的切换，一个方法是hover()，另一个是toggle(),感兴趣的朋友不妨了解下,或许对你有所帮助
    2013-02-02

最新评论