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,