网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 使用jquery.form.js实现图片上传的方法
内容
    这篇文章主要介绍了使用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程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/17 13:45:03