uploadify上传图片插件的使用

Posted chuwu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uploadify上传图片插件的使用相关的知识,希望对你有一定的参考价值。

uploadify 是一款上传图片专用的插件
该插件在页面中只是一个按钮,点击按钮弹出文件选择框,选择图片后自动上传到服务器

1.http://www.uploadify.com/ 是其官网
下载可能需要钱

2.使用
在官网点击doc来到文档位置http://www.uploadify.com/documentation/
在下面点击Implementing Uploadify来到安装使用的目录 http://www.uploadify.com/documentation/uploadify/implementing-uploadify/

1.下载uploadify后得到一些文件,需要将其放到我们想放的地方

2.该插件需要jquery的支持,所以页面中引入插件之前先引入jquery.min.js,这个文件自己去下载即可

3.页面中引入uploadify的文件
<script type="text/javascript" src="/jquery.uploadify-3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css" />
在body之前添加
<script>
$(function() {
$(‘#file_upload‘).uploadify({
‘swf‘ : ‘uploadify.swf‘,
‘uploader‘ : ‘uploadify.php
// Put your options here
});
});
</script>
4.html代码中加入<input type="file" name="file_upload" id="file_upload" />

注意,在引入uploadify文件之前要先引入jquery文件,接着引入uploadify的js文件jquery.uploadify-3.1.min.js和css文件,最后得到的大概是这样的
<!DOCTYPE html>
<html>
<head>
<title>My Uploadify Implementation</title>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$(‘#file_upload‘).uploadify({
‘swf‘ : ‘uploadify.swf‘,//这个uploadify.swf的路径要正确
‘uploader‘ : ‘uploadify.php‘//这是提交到哪个页面,在这里对上传的图片进行获取和处理,保存等
// Your options here
});
});
</script>
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
</body>
</html>

3.错误问题
1.要保证引入文件的路径是正确的,保证‘swf‘:‘uploadify.swf‘文件路径是正确的
2.打开页面发现并没有显示uploadify样式的按钮,而是原始的上传文件按钮,这可能是因为浏览器认为我们的网站是危险网站,不加载我们的uploadify.swf文件
可以看到地址栏旁边显示一个危险信息,我们需要对网站进行信任,让其加载
以chrome浏览器为例,点击地址栏左边的危险感叹号,弹出框中选择网站设置,允许flash和弹出式窗口等,重新加载页面即可看到按钮样式改变了
3.页面打开后就报一个404的错误,原因是页面打开时自动进行了上传操作,此时还没有选择文件的,这是uploadify.min.js中的bug,我们要进行修改
uploadify.min.js中将this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url);
改为if (this.settings.button_image_url != "") {this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url);}

4.uploadify相关属性和函数使用
在官网中查看文档,可知道一些事件的使用方法,如
$(function() {
$("#file_upload").uploadify({
‘height‘ : 50,//设置了高度
‘swf‘ : ‘/uploadify/uploadify.swf‘,
‘uploader‘ : ‘/uploadify/uploadify.php‘,
‘onUploadSuccess‘ : function(file, data, response) {//设置上传成功时的操作
alert(‘The file ‘ + file.name + ‘ was successfully uploaded with a response of ‘ + response + ‘:‘ + data);
},
‘onUploadError‘ : function(file, errorCode, errorMsg, errorString) {//设置上传失败时的操作
alert(‘The file ‘ + file.name + ‘ could not be uploaded: ‘ + errorString);
}
});
});




























































以上是关于uploadify上传图片插件的使用的主要内容,如果未能解决你的问题,请参考以下文章

在php中使用jquery uploadify进行多图片上传

uploadify插件火狐上传图片显示302,或者是 IO,

thinkphp 使用插件异步上传图片或者文件

jquery.uploadify.js修改时,怎么判断上传了几张图片

文件上传利器JQuery上传插件Uploadify

插件 uploadify