uploadify插件实现多个图片上传并预览

使用uploadify插件可方便实现图片上传功能。兼容ie6、ie7。

上传成功之后使用插件的回调函数读取json数据，根据url实现图片预览。

效果图：

点击浏览文件上传图片，图片依次在右侧显示预览效果。

实现：

json数据格式如下：

页面代码如下：

注：需要引用jQuery.js、uploadify.js、uploadify文件。。uploadify文件下载地址

<html>
<head>
<script type="text/javascript" src="static/js/jquery.js">"></script>
<script type="text/javascript" src="static/js/jquery.select.js">"></script>
</head>
<body>

<div class="file-box">
    <div id="divPreview">
     <span style="float:left">（最多可上传五张图片）</span>
    </div>
    <input type="file" name="file" class="file" id="fileField" />
    <input type="hidden" name="hash" id="hash" value="xoxo"/> 

</div>
<script>
$(function() {
  $("#fileField").uploadify({
    'height'    : 30,
    'swf'    : '<?php echoYii::app()->request->baseUrl ?>/static/uploadify/uploadify.swf?var='+(newDate()).getTime(),
    'uploader'   :'index.php?r=upload/uploadimage',
    'width'     : 120,
    'onUploadSuccess' : function(file, data, response) {

      var info = eval("("+data+")");
      if(info.err==1){alert(info.msg);} //如果图片过大或者格式错误弹出错误信息
      else{
      $("#divPreview").append($("<img src='" + info.img + "'/>"));
      $("#divPreview").append($("<input type='hidden' name='imgId[]' value='" + info.imgId + "'/>"));
      }
    },
    'buttonText'  : '浏览文件',
    'uploadLimit'  : 5,  //上传最多图片张数
    'removeTimeout' : 1,
    'preventCaching': true, //不允许缓存
    'fileSizeLimit' : 4100, //文件最大

    'formData'   : { '<?php echosession_name();?>' : '<?php echosession_id();?>','hash':$("#hash").val() } //hash

  });

  $("#SWFUpload_0").css({ //设置按钮样式，根据插件文档进行修改

   'position' :'absolute',
   'top': 20,
   'left': 35,
   'z-index' : 1

    });

});

</script>
</body>
</html>

曾遇到问题：

ie、360浏览器中对json数据检查比较严格，不允许最后一个“，”存在。其它浏览器不会报错，需要注意。

阅读插件文档能力有待提高

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Jquery uploadify图片上传插件无法上传的解决方法

    首先你确定你使用的插件的版本,版本不同,产生的问题也不同,我用的是3.2.1的版本,我前几天已经做好的功能今天运行的时候出错了,搞了半天也不知道那错了,最好仔细寻找,原来是jquery库的引入问题,可能是我引入的包版本低了,我换了一个js库立马好了,真是坑爹啊,谁需要这个demo的可以邮件我!

  • jQuery插件uploadify实现ajax效果的图片上传

    昨天做了一天的ajax效果的图片上传,就是想让自己学的更加的精一些,所以看了很多第三方的控件,最后还是选择了uploadify这个控件,主要原因是比较容易上手. 首先我们先参考别人的资料(我自己整理了一下) 可选项 需要参数类型 参数名字 解释 (布尔型) auto 当文件被添加到队列时,自动上传. (字符串) buttonImg 浏览按钮的背景图片路径. (字符串) buttonText 默认在按钮上显示的文本. (字符串) cancelImg 取消按钮的背景图片路径. (字符串) check

  • 使用ThinkPHP+Uploadify实现图片上传功能

    首先,将下载的Uploadify压缩包解压放到公共文件夹内.实现代码如下: 前台html部分: <script src="/uploadify/jquery.min.js" data-ke-src="/Public/uploadify/jquery.min.js" type="text/javascript"> <script src="/uploadify/jquery.uploadify.min.js"

  • 图片上传插件jquery.uploadify详解

    1.js代码: 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { $('#fileInput').uploadify({ //以下参数均是可选 'uploader' : '<%=basePath%>images/uploadify.swf', //指定上传控件的主体文件,默认'uploader.swf' 'script' : '<%=basePath%>

  • uploadify插件实现多个图片上传并预览

    uploadify插件实现多个图片上传并预览

    使用uploadify插件可方便实现图片上传功能.兼容ie6.ie7. 上传成功之后使用插件的回调函数读取json数据,根据url实现图片预览. 效果图: 点击浏览文件上传图片,图片依次在右侧显示预览效果. 实现: json数据格式如下: 页面代码如下: 注:需要引用jQuery.js.uploadify.js.uploadify文件..uploadify文件下载地址 <html> <head> <script type="text/javascript"

  • Ajax实现图片上传并预览功能

    先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 <input type='file' name='pic'> 当我们点击表单的时候提示选择需要上传的图片.但是此需求我们分析一下,可以在点击图片的时候使用JS实现预览功能,并且楼主也是这样做的.代码如下: function getFileUrl(source

  • jQuery+HTML5实现图片上传前预览效果

    jQuery+HTML5实现图片上传前预览效果

    本文实例讲述了jQuery+HTML5实现图片上传前预览效果.分享给大家供大家参考.具体如下: 这里主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-c

  • ASP.NET MVC图片上传前预览简单实现

    ASP.NET MVC图片上传前预览简单实现

    本文实例为大家分享了图片上传前预览并获取图片文件名和图片字节大小的具体实现代码,供大家参考,具体内容如下 在控制器中创建一个Action: 在Views目录下对应的控制器名称下创建视图PreViewing: 上图中 标记1,引用jQuery类库. 标记2,选择文件. 标记3,预览图片. 标记4,显示图片文件名和图片字节大小. 标记5,是Javascript代码...... 本例预览: 以上就是本文的全部内容,希望对大家的学习有所帮助.

  • js HTML5多图片上传及预览实例解析（不含前端的文件分割）

    本文实例为大家分享了js HTML5多图片上传及预览实例,供大家参考,具体内容如下 主要运用  1.HTML5 files可以选择多文件,以及获取多文件信息  2.XMLHTTPRequest对象,发送HTTP传输请求  3.将每一个文件放在FormData,进行传输  4.利用readAsDataURL将图片内容直接变成url,放在img标签的src当中,生成可预览的图片 html+css+js代码 <!DOCTYPE html> <head> <meta http-equ

  • 原生js FileReader对象实现图片上传本地预览效果

    原生js FileReader对象实现图片上传本地预览效果

    本文实例为大家分享了js实现图片上传本地预览效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta

  • jquery实现图片上传之前预览的方法

    本文实例讲述了jquery实现图片上传之前预览的方法.分享给大家供大家参考.具体实现方法如下: <!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">

  • AngularJS实现图片上传和预览功能的方法分析

    本文实例讲述了AngularJS实现图片上传和预览功能的方法.分享给大家供大家参考,具体如下: html5原生方法 先看一下html5原生方法上传和预览图片的实现: // <img id="img-preview"> var imgPreview = document.getElementById("img-preview"); // <input id="img-input" type="file">

  • JavaScript实现图片上传并预览并提交ajax

    JavaScript实现图片上传并预览并提交ajax

    本文实例为大家分享了JavaScript实现图片上传并预览并提交ajax的具体代码,供大家参考,具体内容如下 图片上传并预览 HTML <div class="file-box"> <img id="preview" /> <input type="text" id="imgfield" class="txt" placeholder="预览"> &l

  • vue.js 图片上传并预览及图片更换功能的实现代码

    这里讲解是图片上传和图片预览.主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果 效果图: 样式以及效果图一并展示 1.HTML <div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id=

随机推荐