uploadify多图片和文件上传网站应用
先要下载压缩包
www.uploadify.com/wp-content/uploads/files/uploadify.zip
1,模板文件引用
<!--引用jquery uploady*}-->
<script src="http://www.96net.com.cn/public/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.96net.com.cn/public/uploadify.css" media="all">
<script type="text/javascript" src="http://www.96net.com.cn/public/jquery.uploadify.min.js"></script>
<!-- uploadify相关设置 -->
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'formData' : {
'timestamp' : '{#$timestamp#}',
'token' : '{#$token#}'
},
//在php下应用的时候请务必加上这些代码,避免使用出错
'buttonText':'上传',
'multi': true,//允许多文件上传
'swf' : "public/uploadify.swf",
'uploader' : '{#spUrl c=heji a=uploadify#}',
'onUploadSuccess': function (file, data, response) {
$('.touxiang_path').val(data);
}
});
});
</script>
2.代码添加几行代码
<div class="touxiang">
<input id="file_upload" type="text" name="touxiang">
</div>
<div class="touxiang_path">
<input id="" type="text" name="touxiang_path" class="touxiang_path" style="width: 500px;">
</div>
可以任意修改样式,可以更加美观
3,php上传处理
$targetFolder = '/up/';
$verifyToken = md5('unique_salt' . $_POST['timestamp']);
if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $handler_dir.'/'. $targetFolder;
$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
$fileTypes = array('jpg','jpeg','gif','png'); // File extensions
$fileParts = pathinfo($_FILES['Filedata']['name']);
if (in_array($fileParts['extension'],$fileTypes)) {
move_uploaded_file($tempFile,$targetFile);
echo '1';
} else {
echo 'Invalid file type.';
}
}
可以设置图片和文件大小,可以加水印,缩略图,任意处理图片等
uploadify多图片和文件上传网站应用的更多相关文章
- 基于uploadify.js实现多文件上传和上传进度条的显示
uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制.文件类型.是否自动上传等属性,可以显示上传的进度条.官网地址是http://www.uploadify. ...
- UEditor独立图片、文件上传模块
百度的UEditor编辑器的强大之处不用多说,但是有时候我们只想用他的文件.图片上传模块,不想把这个编辑器加载出来,话不多说,直接上实现代码: 引用文件: <script src="~ ...
- AFNetworking之多图片-文件上传
在分享经验之前,先说点题外话,之前的一个项目涉及到了多图片的上传,本来以为是一个很简单的事情,却着实困扰了我好久,究其原因,一是我不够细心,二是与后台人员的交流不够充分.在此,我想将我的老师常说的一句 ...
- 在 .NET Core项目中使用UEditor图片、文件上传服务
在.NET Framework中使用UEditor时,只需要将UEditor提供的后端服务,部署为一个子程序,即可直接使用文件上传相关的服务,但是UEditor官方并未提供.Net Core的项目,并 ...
- 一款基于uploadify扩展的多文件上传插件,完全适用于Html5
http://www.uploadify.com/documentation/ 官网里面有两个插件,一个是要使用flash插件才能文件上传的插件,另外一个是不需要使用要flash插件的文件上传插件完 ...
- vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]
后端DEMO:https://github.com/coderliguoqing/UeditorSpringboot 前端DEMO:https://github.com/coderliguoqing/ ...
- 6.12号整理(h5新特性-图片、文件上传)
<input type="file" id='myFile' multiple> <ul> <li> <img src="&qu ...
- java springmvc4 图片或文件上传
1.文件配置 配置文件解析 上传文件处理的核心方法 // uploadOneFile.jsp, uploadMultiFile.jsp submit to. @RequestMapping(value ...
- jQuery uploadify 文件上传
uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能.现在最新版为3.2.1. 在线实例 实例预览 Uploadify 在线实例Demo ...
随机推荐
- TensorFlow学习笔记2:逻辑回归实现手写字符识别
代码比较简单,没啥好说的,就做个记录而已.大致就是现建立graph,再通过session运行即可.需要注意的就是Variable要先初始化再使用. import tensorflow as tf fr ...
- 基于Redis实现简单的分布式锁【理论】
摘要 分布式锁在很多应用场景下是非常有效的手段,比如当运行在多个机器上的不同进程需要访问同一个竞争资源的时候,那么就会涉及到进程对资源的加锁和释放,这样才能保证数据的安全访问.分布式锁实现的方案有很多 ...
- ThreadLocal 应用
利用threadLocal 把拦截器中的对象传递到controller或service中 1.可以用 request 携带数据. 2.更优雅的方式是用threadlocal. 请求进入tomcat 和 ...
- Linux下安装Python,以及环境变量的配置
1.安装环境 centos7 + vmware + xshell 2.安装Python3 2.1下载Python资源包 网址:https://www.python.org/downloads/re ...
- 【leetcode】1039. Minimum Score Triangulation of Polygon
题目如下: Given N, consider a convex N-sided polygon with vertices labelled A[0], A[i], ..., A[N-1] in c ...
- 前端开发本地存储之cookie
1.cookie cookie是纯文本,没有可执行代码,是指某些网站为了辨别用户身份.进行 session 跟踪而储存在用户本地终端(浏览器)上的数据(通常经过加密).当用户访问了某个网站的时候,我们 ...
- 实现网页qq在线咨询功能
在自己的网页中实现qq在线咨询,给图片或链接添加地址为:tencent://message/?uin=你的qq号码!就可以了. <a href="tencent://message/? ...
- Cluster基础(二):ipvsadm命令用法、部署LVS-NAT集群、部署LVS-DR集群
一.ipvsadm命令用法 目标: 准备一台Linux服务器,安装ipvsadm软件包,练习使用ipvsadm命令,实现如下功能: 使用命令添加基于TCP一些的集群服务 在集群中添加若干台后端真实服务 ...
- 删除c++项目中的类
关闭引擎和vs 在工程目录中删除Source文件夹下相应的cpp和h文件 删除工程目录的saved 文件夹和intermediate文件夹 删除工程目录中binaries文件夹内的所有内容 右键工程文 ...
- mui初级入门教程(二)— html5+ webview 底部栏用法详解
文章来源:小青年原创发布时间:2016-05-19关键词:mui,html5+,webview转载需标注本文原始地址: http://zhaomenghuan.github.io/#!/blog/20 ...