码迷,mamicode.com
首页 > Web开发 > 详细

uploadify上传图片插件的使用

时间:2018-11-15 00:13:40      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:没有   orm   url   自己   www.   err   官网   成功   问题   

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上传图片插件的使用

标签:没有   orm   url   自己   www.   err   官网   成功   问题   

原文地址:https://www.cnblogs.com/chuwu/p/9961090.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!