jquery插件uploadify多图上传功能实现代码_jquery

本文实例为大家分享了uploadify多图上传具体实现代码,可动态添加上传框,供大家参考,具体内容如下


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UploadiFive Test</title>
<script src="jquery2.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<style type="text/css">
body {
 font: 13px Arial, Helvetica, Sans-serif;
}

</style>
</head>

<body>
 <h1>Uploadify Demo</h1>
 <div class='upload'>

  <form>
   <div class='form_file'>

    <div class='file'>

     <input id="file_upload1" name="file_upload" type="file" multiple="true">

    </div>
   </div>
  </form>

 </div>

 <a href="javascript:;" class="clickUpload"> 点击 </a>

 <script type="text/javascript">

  <?php $timestamp = time();?>
  $(function() {

   var i=2;
   $('.clickUpload').click(function(){
    var html='';
    html+='<div class="file"><input id="file_upload'+i+'" name="file_upload" type="file" multiple="true"></div>';

    $('.form_file').append(html);

     $('#file_upload'+i).uploadify({

      'formData'  : {
       'timestamp' : '<?php echo $timestamp;?>',
       'token'  : '<?php echo md5('unique_salt' . $timestamp);?>'
      },

      'swf'  : 'uploadify.swf',
      'uploader' : 'uploadify.php',
      'width'   : '120',

      'fileTypeExts': '*.gif; *.jpg; *.png',
      'buttonText': '上传图片',

      'removeCompleted' : false,

      'multi' : true, //允许多图上传

      //上传成功后执行
      'onUploadSuccess': function (file, data, response) {
       $('#' + file.id).find('.data').html(' 上传完毕');
      }

     });
    i++;
   })

   $('#file_upload1').uploadify({

    'formData'  : {
     'timestamp' : '<?php echo $timestamp;?>',
     'token'  : '<?php echo md5('unique_salt' . $timestamp);?>'
    },

    'swf'  : 'uploadify.swf',
    'uploader' : 'uploadify.php',
    'width'   : '120',

    'fileTypeExts': '*.gif; *.jpg; *.png',
    'buttonText': '上传图片',

    'removeCompleted' : false,

    'multi' : true, //允许多图上传

    //上传成功后执行
    'onUploadSuccess': function (file, data, response) {
     $('#' + file.id).find('.data').html(' 上传完毕');
    }

   });

  });

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

更多精彩内容,请点击《jQuery上传操作汇总》,进行深入学习和研究。

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery图片上传
, uploadify多图上传
, jquery多图上传
jquery上传图片
jquery多图上传插件、jquery多图上传的插件、uploadify多图上传、uploadify多图上传php、jquery uploadify插件,以便于您获取更多的相关知识。

时间: 2024-10-12 07:01:26

jquery插件uploadify多图上传功能实现代码_jquery的相关文章

jquery插件之文字间歇自动向上滚动效果代码_jquery

本文实例讲述了jquery插件之文字间歇自动向上滚动效果代码.分享给大家供大家参考,具体如下: 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

jquery 实现轮播图详解及实例代码_jquery

轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较.轮播图的效果可以点击如下链接查看:http://sandbox.runjs.cn/show/t07kscph jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <hea

jquery插件ajaxupload实现文件上传操作_jquery

本文实例讲述了jquery插件ajaxupload实现文件上传操作代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 图1 文件上传前 图2 文件上传后 具体代码如下: 1.创建页面并编写HTML 上传文档:  <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></s

谢谢了-jquery 插件uploadify

问题描述 jquery 插件uploadify Uncaught TypeError: Cannot read property 'queueData' of undefined 大神们,使用uploadify出现上面的错误是什么原因啊. 解决方案 这需要swf,引入了swfobject.js吗? 解决方案二: 你的使用方法不当啊,导入格式不对 解决方案三: 这样的结构对吗 解决方案四: 你怎么用的,看错误提示应该你的queueData对象被重写过或者调用过destroy方法销毁对象过了

JQuery插件ajaxfileupload.js异步上传文件实例

这篇文章主要介绍了JQuery插件ajaxfileupload.js异步上传文件实例,本文直接给出了HTML代码和JS代码以及后台处理代码,需要的朋友可以参考下     在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用:  代码如下: <scr

利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)_jquery

  <body> <div class="container demo"> <div class="big"> <p class="instructions">大图预览</p> <div class="bigframe"> <img width="300" height="300" src="imag

struts+spring +ibatis实现上传功能的代码

问题描述 struts+spring +ibatis实现上传功能的代码 求struts+spring +ibatis实现上传功能的代码 解决方案 ibatis+struts+spring配置和登录实现Magento多文件上传代码功能实现 解决方案二: http://blog.csdn.net/chongan_wang/article/details/4892599 使用uploadify这个jquery插件做上传

zend framework文件上传功能实例代码

 zend framework文件上传功能实例代码,php的版本5.3.8,zend framework的版本1.12,看下面的代码吧,有注释  代码如下: //实例化上传类 $upload = new Zend_File_Transfer(); //设置过滤器,大小限制为5M,格式为jpg,gif,png $upload->addValidator('Size', false, 5 * 1024 * 1024); $upload->addValidator('Extension', fals

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

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