您的位置：首页 > Web前端 > JQuery

jquery.Uploadify.js 上传插件

2017-02-24 00:00 309 查看

官网

http://www.uploadify.com/download/

中文文档

http://www.mamicode.com/info-detail-506696.html

一、单图上传

1.引入样式，js

2.配置$('#file_upload').uploadify({ })参数。

二、多图上传

原理和单图上传相同，唯一区别是可用onUploadSuccess事件中，ajax生成隐含的value值为图片地址的input标签。

示例代码

前台：html

<html lang="en">
<head>

<meta charset="utf-8">
<title>365Kaifa</title>

<!--图片上传插件-->
<link rel="stylesheet" type="text/css" href="/feb1/ui/test/tp/Public/assets/js/uploadify/uploadify.css">
<script src="/feb1/ui/test/tp/Public/assets/js/uploadify/jquery-1.9.1.min.js"></script>
<script src="/feb1/ui/test/tp/Public/assets/js/uploadify/jquery.uploadify.js"></script>

</head>

<body>

<!-- PAGE CONTENT BEGINS -->
<from id="form1">
<input type="file" id="file_upload" name="file_upload">
</from>

</body>
</html>

前端：js

<script>
$(function () {
<?php $timestamp=time();?>
$('#file_upload').uploadify({
'swf': '__PUBLIC__/assets/js/uploadify/uploadify.swf',    //指定上传控件的主体文件
'uploader': 'upload',   //指定服务器端上传处理文件
'buttonText': '上传图片',
//显示的高度和宽度，默认 height 30；width 120
//'height': 105,
//'width': 800,
//上传文件的类型  默认为所有文件    'All Files'  ;  '*.*'
//在浏览窗口底部的文件类型下拉菜单中显示的文本
'fileTypeDesc': 'Image Files',
//允许上传的文件后缀
'fileTypeExts': '*.gif; *.jpg; *.png',
//发送给后台的其他参数通过formData指定
'formData': {
'timestamp': '<?php echo $timestamp;?>',
'token': '<?php echo md5('unique_salt' . $timestamp);?>'
},
//上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false  自动生成,  不带#
//'queueID': 'fileQueue',
//选择文件后自动上传
'auto': true,
//设置为true将允许多文件上传
'multi': true,
'onInit': function () {
// alert("1");
},
'onSelect': function (img) {
/* alert(
"文件名：" + img.name + "\r\n" +
"文件大小：" + img.size + "\r\n" +
"创建时间：" + img.creationDate + "\r\n" +
"最后修改时间：" + img.modificationDate + "\r\n" +
"文件类型：" + img.type
);
*/

}, 'onUploadSuccess' : function(file, data, response) {
var json_data=eval("("+data+")");
alert(json_data.info);
}
})

});
</script>

后端 php

public function upload()
{
$targetFolder = '/uploads'; // Relative to the root

$verifyToken = md5('unique_salt' . $_POST['timestamp']);//验证token

if (!empty($_FILES) && $_POST['token'] == $verifyToken) {

$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;

$code = mb_detect_encoding($_FILES['Filedata']['name'], array("ASCII",'UTF-8','GB2312',"GBK",'BIG5'));//windows下编码为gbk
if($code=='UTF-8'){
$_FILES['Filedata']['name']=iconv('UTF-8','gb2312',$_FILES['Filedata']['name']);
}

$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
// Validate the file type
$fileTypes = array('jpg','jpeg','gif','png'); // File 扩展名检测
$fileParts = pathinfo($_FILES['Filedata']['name']);

if (in_array($fileParts['extension'],$fileTypes)) {
if(!file_exists($targetPath)){
mkdir($targetPath);
}
move_uploaded_file($tempFile,$targetFile);
echo json_encode(array('status'=>1,'info'=>'上传成功'));
} else {
echo json_encode(array('status'=>1,'info'=>'服务器不支持该格式图片'));
}
}else
echo json_encode(array('status'=>1,'info'=>'上传失败'));

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery.Uploadify.js 图片上传 jquery插件

相关文章推荐

新的分享

章节导航