来自 美高梅4858官方网站 2019-11-30 13:37 的文章
当前位置: 美高梅4858官方网站 > 美高梅4858官方网站 > 正文

图片上载,js实现多文件上传和上传进度条的显示

从官方网站下载的Uploadify最新版本:

转自 基于uploadify.js实现多文件上传和上传进度条的显示

jQuery库是1.7.1版本。

uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制、文件类型、是否自动上传等属性,可以显示上传的进度条。官网为 files like magic",意思是说使用uploadify上传文件如魔法一般。目前一共分为两个版本,Flash版和HTML5版,不过HTML5版是收费的,如图:

下载好的Uploadify目录下面的文件有:

图片 1

图片 2

这里我们下载Flash版~~ 

用到的文件有

 

uploadify.css

 一、简单文件上传的实现

jquery.uploadify.min.js

 下载完成后,解压到当前目录,可以看到如下目录:

 

图片 3

下面先给出HTML代码:

uploadify.js是基于JQuery的,所以我们也要引入JQuery,红色圈住的使我们要使用的文件,额!JQuery是我下载放进去的,大家自己下载一个吧。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   2 <html xmlns="http://www.w3.org/1999/xhtml">   3 <head>   4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   5     <title>Demo</title>   6     <link rel="stylesheet" type="text/css" href="/uploadify/uploadify.css" />   7     <script type="text/javascript" src="/uploadify/jquery-1.7.1.min.js"></script>   8     <script type="text/javascript" src="/uploadify/jquery.uploadify.min.js"></script>   9   10     <script type="text/javascript">  11     $(function(){  12         //这一行也是必要的,后面会调用  13         <?php $timestamp = time();?>  14         $('#editor_img').uploadify({  15             //这里往表单中添加数据  16             'formData'     : {  17                     'timestamp' : '<?php echo $timestamp;?>',  18                     'token'     : '<?php echo md5('unique_salt' . $timestamp);?>',  19                    //这是上传到的文件夹  20                     'folder'    : '__ROOT__/Uploads'  21                 },  22             'swf'             : '/uploadify/uploadify.swf',  23             'uploader'        : '/uploadify/uploadify.php',  24             'buttonClass'     : 'upload-image',  25             'fileTypeExts'    : '*.gif; *.jpg; *.png',  26             'width'           : 28,  27             'height'          : 28  28         });  29     });  30     </script>  31 </head>  32 <body>  33     <form id="form" action="{:U('Index/doData')}" method="post" class="think-form">  34             <!-- 注意这里的name必须写成 Filedata,下面会解释 -->  35             <input id="editor_img" type="file" name="Filedata" />   36             <input type="submit" value="提交" />  37     </form>  38 </body>  39 </html>

新建一个Web项目,然后把上面的文件都放到项目根目录下(这样做不好,大家自己规划目录,我就不废话了),然后新建页面,引入JQuery、uploadify.js和uploadify.css,接下来该干些什么呢?没有头绪啊,打开刚刚的下载目录看看,有个index.php,打开看到是一个官方的Demo,那么就从这个Demo说起吧,下来看看问什么包里面没有JQuery,看图:

注意,uploadify.php函数是需要修改的,不然会报出很多错误,比如找不到文件,或者某个变量未定义等等,还可以修改返回值。

图片 4

 1 <?php   2 /*   3 Uploadify   4 Copyright (c) 2012 Reactive Apps, Ronnie Garcia   5 Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>    6 */   7    8 // Define a destination   9 $targetFolder = '/Uploads'; // Relative to the root  10   11 $verifyToken = md5('unique_salt' . $_POST['timestamp']);  12   13 if (!empty($_FILES) && $_POST['token'] == $verifyToken) {   14 //这里接收传过来的目录  15     $targetFolder = $_POST['folder'];  16  //这里出现了Filedata,前面的文件名称对应这里就行,不然会报错  17     $tempFile = $_FILES['Filedata']['tmp_name'];  18     $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;  19     $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];  20       21 // Validate the file type  22     $fileTypes = array('jpg','jpeg','gif','png'); // File extensions  23     $fileParts = pathinfo($_FILES['Filedata']['name']);  24       25     if (in_array($fileParts['extension'],$fileTypes)) {  26         move_uploaded_file($tempFile,$targetFile);  27 //修改返回值,本来默认是返回1,现在改为返回相对路径  28         echo $targetFolder. '/' . $_FILES['Filedata']['name'];  29     } else {  30         echo 'Invalid file type.';  31     }  32 }  33 ?>

我们可以看到Demo中加载的是googleapis的JQuery,版本是1.7.1,然后看下面的代码:

这样就可以把图片上传到服务器指定目录下了。

图片 5

我不知道是版本问题还是别的原因,按照网上的做法总是出错,所以记下成功的配置,供需要的人参考。

一个form表单,里面有个input,type是file,下面来看看JS代码:

接着更新一下,以上使用因为没有特别编辑Uploadify.php文件,用的是自带文件,所以前台的需要做相应的修改,比如后台用到了时间戳,前台需要传递参数等。不过关于Input的name在上面的例子里面为什么非要写成Filedata,还不是很清楚。

图片 6

下面给出一个经典示例:

很简单,用JQuery调用了uploadify方法。其中swf和uploader指的是flash文件的地址和上传的处理程序。好,下面亲自动手来写一个试试。

HTML页面:

既然是文件上传,我们要先有一个文件上传方法吧,新建FileUpload.ashx文件,写入以下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      <title>Uploadify</title>      <script type="text/javascript" src="/uploadify/jquery-1.7.1.min.js"></script>      <script type="text/javascript" src="/uploadify/swfobject.js"></script>      <script type="text/javascript" src="/uploadify/jquery.uploadify.js"></script>      <link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet"/>        <script type="text/javascript">      $(function(){          <?php $timestamp = time();?>          $('#file_upload').uploadify({              'formData'     : {                      'timestamp' : '<?php echo $timestamp;?>',                      'token'     : '<?php echo md5('unique_salt' . $timestamp);?>',                      'folder'          : '__ROOT__/Uploads'                  },              'swf'             : '/uploadify/uploadify.swf',              'uploader'        : '/uploadify/uploadify.php',              'buttonClass'     : 'upload-image',              'buttonText'      :'选择文件',              'fileTypeExts'    : '*.gif; *.jpg; *.png; *.pdf',              'width'           : 500,              'height'          : 50,              'auto'            : false,              'cancelImg'       :'/uploadify/uploadify-cancel.png',              'onUploadSuccess' : function(file, data, response) {                  var html = '<p id="file_name">'+file.name;                  html +='<a   onclick="delete_file_name(this);">删除</a>';                  html +='<input type="hidden" name="file_name" value="'+data+'"/></p>';                  $('#file_upload').after(html);              }          });      });            function delete_file_name(e){          var $this = $(e);          $this.parent('p').remove();      }      </script>  </head>  <body>      <div style="width:500px; margin:auto;">          <input id="file_upload" type="file" name="file_upload" />          <p id="file_name"></p>          <p>              <a href="javascript:$('#file_upload').uploadify('upload')">上传</a>|              <a href="javascript:$('#file_upload').uploadify('cancel')">取消上传</a>          </p>      </div>  </body>  </html>
 context.Response.ContentType = "text/plain";
        if (context.Request.Files.Count > 0)
        {
            HttpPostedFile file = context.Request.Files[0];
            string ext = System.IO.Path.GetExtension(file.FileName);
            string fileName = DateTime.Now.Ticks + ext;
            string p = "/upload/" + fileName;
            string path = context.Server.MapPath("~/upload/" + fileName);
            file.SaveAs(path);
            context.Response.Write("1");
        }

Uploadify.php做了一些简单修改

一个简单的文件上传,有人会问文件上传成功问什么返回“1”呢?我们来看看Uploadify.php,如图:

<?php  /*  Uploadify  Copyright (c) 2012 Reactive Apps, Ronnie Garcia  Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>   */    // Define a destination  $targetFolder = '/Uploads'; // Relative to the root    $verifyToken = md5('unique_salt' . $_POST['timestamp']);    if (!empty($_FILES) && $_POST['token'] == $verifyToken) {      $targetFolder = $_POST['folder'];      $tempFile = $_FILES['Filedata']['tmp_name'];      $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;      //如果目录不存在则创建目录      if(!file_exists($targetPath))      {          mkdir($targetPath,0777);      }      $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];            // Validate the file type      $fileTypes = array('jpg','jpeg','gif','png','pdf','txt','mp3'); // File extensions      $fileParts = pathinfo($_FILES['Filedata']['name']);            if (in_array($fileParts['extension'],$fileTypes)) {          //处理了中文命名文件的上传          move_uploaded_file($tempFile,iconv("UTF-8","gb2312",$targetFile));          //返回的值data          echo $targetFolder. '/' . $_FILES['Filedata']['name'];      } else {          echo 'Invalid file type.';      }  }  ?>

图片 7

本文由美高梅4858官方网站发布于美高梅4858官方网站,转载请注明出处:图片上载,js实现多文件上传和上传进度条的显示

关键词: