图片上传 | phper `blog

JQuery图片上传插件Uploadify使用详解

By admin 2014年5月4日 Javascript No Comments

3183

Uploadify简单说来，是基于Jquery的一款文件上传插件。

<link rel="stylesheet" type="text/css" href="uploadify.css" />

<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script type="text/javascript" src="jquery.uploadify.min.js"></script>

<meta charset="UTF-8">

<!--上传照片-->
<script type="text/javascript">
$(function() {
//图片上传
$('#file_upload').uploadify({
'swf'      : 'uploadify.swf',
'uploader' : 'uploadify.php',
'buttonText':"上传图片",
'multi':true,
'height':20,
'width':60,
'multi':false,
'onUploadSuccess' : function(file, data, response) {
$('#' + file.id).find('.data').html(' - 上传完成');
$("#seek_pic").val(data);
$('#img').attr('src',"http://localhost/Uploadify/demo/uploads/"+data);
},
auto:true,
'fileSizeLimit' : '1024KB',
'fileTypeExts' : '*.gif; *.jpg; *.png; *.jpeg',
formData : { 'PHPSESSID' : '5102dbe30d3b47ec2431a6cd189b151d' }
});

});

</script>
<!--上传图片结束-->

<input type="file"  name="filedata" id="file_upload" />
<img id="img" width="500px" src="">

$(function() {

//图片上传

$('#file_upload').uploadify({

'swf' : 'uploadify.swf',

'uploader' : 'uploadify.php',

'buttonText':"上传图片",

'multi':true,

'height':20,

'width':60,

'multi':false,

'onUploadSuccess' : function(file, data, response) {

$('#' + file.id).find('.data').html(' - 上传完成');

$("#seek_pic").val(data);

$('#img').attr('src',"http://localhost/Uploadify/demo/uploads/"+data);

auto:true,

'fileSizeLimit' : '1024KB',

'fileTypeExts' : '*.gif; *.jpg; *.png; *.jpeg',

formData : { 'PHPSESSID' : '5102dbe30d3b47ec2431a6cd189b151d' }

});

</script>

百度网盘下载地址:http://pan…

phper `blog

一个phper技术分享博客，发表自己最新的开发心得，关注最新的IT技术

fileReader实现图片上传预览

JQuery图片上传插件Uploadify使用详解