uploadify(jquery)插件的使用及图片上传预览

转载 2015年07月08日 12:34:16

由于协助新人做新手上路项目,要实现一个图片上传即时预览的功能,一方面那几天上班的时候鸡毛蒜皮的事情太多,再加上用纯js写要考虑各种浏览器的兼容性,所以没有静下心来研究这个插件(uploadify)的使用,所以借用周末的时间写了一个实例希望可以帮到有同样问题的网友.

uploadify(jquery)插件的使用及图片上传预览

工具/原料

  • 插件官网:http://www.uploadify.com/
  • PHP脚本解析环境(xampp)

方法/步骤

  1. 首先到插件官网下载uploadify,然后解压到xampp的网站根目录下,目录结构如下(因为PC上的浏览器对HTML5的支持没有智能手机那么好所以建议下载Flash版本的)      网站根目录:D:/xampp/htdocs/

    uploadify(jquery)插件的使用及图片上传预览
    uploadify(jquery)插件的使用及图片上传预览
  2. 打开index.php看一下,官网给的实例,引入了jquery库和一个uploadify.js和css文件,然后最了一些初始化配置,上传一张图片之后看是否能成功

    uploadify(jquery)插件的使用及图片上传预览
    uploadify(jquery)插件的使用及图片上传预览
  3. 到目录下面去查看结果没有刚才上载的文件,看看uploadify.js源码是调用了uploadify.php现在只有去查看这个js文件看看哪里有错误,看过源码之后应该新建目录之后就能上传成功试试看

    uploadify(jquery)插件的使用及图片上传预览
    uploadify(jquery)插件的使用及图片上传预览
  4. 再次上传看看时候能够成功,经过新建目录达到目的,但是还是没有达到我们的即时预览功能,只有在去看uploadify.php和uploadify.js源码了

    uploadify(jquery)插件的使用及图片上传预览
    uploadify(jquery)插件的使用及图片上传预览
    uploadify(jquery)插件的使用及图片上传预览
  5. 照着官网的例子把那个onUploadSuccess事件的使用方法复制到我们的index.php里面去,然后测试一下看是否能够成功,结果成功的谈出了我们要的东西,有了这个那我们的问题就可以迎刃而解了

    uploadify(jquery)插件的使用及图片上传预览
    uploadify(jquery)插件的使用及图片上传预览
  6. 上面已经弹出了我们要的信息,现在在index.php里面加入一个div然后用jquery动态显示图片就,实现了我们的即时预览功能!

    uploadify(jquery)插件的使用及图片上传预览
    uploadify(jquery)插件的使用及图片上传预览
    END

注意事项

  • 官网有很多范例,大家可以参考一下,用这就避免各个浏览器兼容的问题
  • jquery版本务必高于1.7

http://jingyan.baidu.com/article/295430f12265f40c7e005036.html

Uploadify 控件上传图片 + 预览

jquery的Uploadify控件上传图片和预览使用介绍。    在简单的servlet系统中和在SSH框架中,后台处理不同的,在三大框架中图片预览时费了不少力气,所以下面将两种情况都介绍一下。  ...
  • lishuangzhe7047
  • lishuangzhe7047
  • 2014年12月08日 14:54
  • 21388

JQuery上传插件Uploadify的简单使用

在开发 web程序的时候,上传附件或是照片这是常有的事件,以前一直在使用swfupload,后来发现了Jquery的Uploadify感觉不错,就试了一下,这里做一个记录。以备使用。        ...
  • chenguang79
  • chenguang79
  • 2016年02月29日 14:46
  • 7186

jQuery上传插件Uploadify 3.2在.NET下的详细例子

项目中要使用Uploadify 3.2来实现图片上传并生成缩略通的功能,特此记下来,以供各位参考! Uploadify下载地址:http://www.uploadify.com/download/ ...
  • wangqiuyun
  • wangqiuyun
  • 2013年06月28日 15:19
  • 29769

java版-JQuery上传插件Uploadify使用实例

运行效果: 包结构图:   后台JAVA逻辑: Java代码   package com.bijian.study;      import ...
  • huangshengzhi
  • huangshengzhi
  • 2014年04月24日 13:56
  • 2080

Jquery上传插件uploadify的使用(JSP)版

今天,突然想研究下那个uploadify插件,在网上搜索好多资料,发现千奇百怪,可能是版本问题,关于服务端处理脚本我发现了两种说法,一种是通过‘script’来设置的,另一种是用‘uploadify’...
  • xp_15907659204
  • xp_15907659204
  • 2013年11月26日 10:10
  • 1882

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

使用uploadify插件可方便实现图片上传预览功能。自带
  • liu__hua
  • liu__hua
  • 2014年08月19日 14:19
  • 28726

JQuery Uploadify v3.2.1 上传图片并预览(基于spring mvc框架开发)

Controller后台处理: package com.news.controller; import java.io.File; import java.io.FileInputStream; i...
  • chuan9966
  • chuan9966
  • 2015年04月05日 09:59
  • 1705

JQuery上传插件Uploadify使用详解

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示...
  • a460550542
  • a460550542
  • 2016年09月06日 15:44
  • 880

uploadify+java实现多文件上传和预览

1、下载uploadify插件 2、index.html /js/uploadify-v3.1/jquery.uploadify-3.1.js"> /js/uploadify-v3.1/u...
  • zz_cl
  • zz_cl
  • 2016年10月06日 11:02
  • 3531

jQuery上传文件控件Uploadify使用

Uploadify是JQuery的一个上传插件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件等。 首先应下载jQuery和uploadify插件 jQuery下载地址:h...
  • aqsunkai
  • aqsunkai
  • 2016年06月28日 22:42
  • 5214
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:uploadify(jquery)插件的使用及图片上传预览
举报原因:
原因补充:

(最多只允许输入30个字)