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

相关文章推荐

利用jquery.uploadify插件来实现图片上传和预览效果

文章是告诉你如何利用jquery.uploadify插件来实现图片上传和预览效果,首页我们要看看关于利用jquery uploadify上传图片要注意事项吧。 注意事项   (1)、如果页面没有显...
  • ZLHZHJ
  • ZLHZHJ
  • 2012年05月14日 10:09
  • 2331

jquery.uploadify插件实现图片上传和预览效果

1、js代码: $(document).ready(function() { $('#fileInput').uploadify({ //以下参数均是可选 'uploader' : 'im...
  • hongyu6
  • hongyu6
  • 2012年10月16日 22:37
  • 4241

利用JQuery上传插件Uploadify实现图片上传MongoDB并预览

架构

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

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

jquery.fileupload.js插件使用初探--单图片上传预览

一、官方插件下载地址:http://plugins.jquery.com/blueimp-file-upload/         下载下来后会发现里面包含了一堆文件,首先需要弄清楚的是最核心的部分是...
  • smm188
  • smm188
  • 2016年02月26日 14:21
  • 629

jquery图片上传预览插件

  • 2013年07月12日 16:28
  • 4KB
  • 下载

java图片上传并预览,前台用jQuery插件AjaxFileUpload,后台用FileUtils.copyFile.

个人笔记,以备后用.   表体代码: 查看图片   js代码(记得要引入jquery库和ajaxfileupload库): //上传文件id号 function ...

uploadify图片上传预览删除

  • 2016年10月26日 12:47
  • 263KB
  • 下载

PHP Uploadify+jQuery.imgAreaSelect插件+AJAX 实现图片上传裁剪 仿微博头像上传功能

大家好本文为Daditao原创,希望尊重个人知识劳动
  • daditao
  • daditao
  • 2014年10月24日 15:02
  • 1534

ThinkPHP的使用(六)图片上传及预览插件

将图片预览插件uploadPreview.js下载好放入Common->Js中 模板中导入js文件,及主要代码 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:uploadify(jquery)插件的使用及图片上传预览
举报原因:
原因补充:

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