php+ajax+h5实现图片上传功能
本文实例为大家分享了php实现ajax图片上传的具体代码，供大家参考，具体内容如下
html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="__PUBLIC__/home/js/jquery-1.11.0.js"></script>
</head>
<body>
<form class="form-horizontal" role="form" id="myForm"
action="/index/fileupsend" method="post"
enctype="multipart/form-data">
选择文件:<input type="file" id="file1" /><br />
<input type="button" id="upload" value="上传" />
<span id="imgWait"></span>
</form>
<script>
$(function () {
$("#upload").click(function () {
$("#imgWait").html("上传中");
var formData = new FormData();
formData.append("myfile", document.getElementById("file1").files[0]);
$.ajax({
url: "/Home/index/fileupsend",
type: "POST",
data: formData,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success: function (data) {
if(data){
alert("上传成功！");
}
$("#imgWait").html("上传成功");
},
error: function () {
alert("上传失败！");
$("#imgWait").hide();
}
});
});
});
</script>
</body>
</html>
php代码
public function fileupsend(){
$type_pic = $this->file_upload('1',array('jpg', 'gif', 'png', 'jpeg'),'filetest','myfile');
echo $type_pic['img_path'];
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
php 重写分页器 CLinkPager的实例
php 重写分页器 CLinkPager的实例 1.自定义的分页器类放在哪里? 有两个位置可以放, 第一种是放在 protected/extensions 中,在使用是import进来,或在config文件中import进来: 第二种是放在 protected/components 中,作为组件存在,不需要import 2.用派生方式是最好的 class MyPager extends CLinkPager 入口函数是:public function run() ,当显示分页器时run()被调用
-
thinkPHP实现上传图片及生成缩略图功能示例
本文实例讲述了thinkPHP实现上传图片及生成缩略图功能.分享给大家供大家参考,具体如下: 记录一下在thinkPHP上传图片的方法(Upload)和生成缩略图(Image)的方法. html页面form中必须加enctype="multipart/form-data" <form action="__SELF__" method="post" enctype="multipart/form-data"> <
-
PHP实现网站访问量计数器
简单的网站访问量计数器实现,具体如下 首先说明思路: 1.用户向服务器发出访问请求 2.服务器读取访问次数文件,+1,向客户端返回 3.服务器保存新的浏览次数 4.新用户访问,重复123即可 解决方案(主要算法): 1.数据文件:counter.dat 2.读出数据文件 打开文件: 如果不存在,创建,并以0为初识数据: 否则,读出数据: 关闭文件. 3.把累加后的数据写入文件counter.dat 累加数据: 打开文件: 写入数据:
-
PHP实现找出数组中出现次数超过数组长度一半的数字算法示例
本文实例讲述了PHP实现找出数组中出现次数超过数组长度一半的数字算法.分享给大家供大家参考,具体如下: <?php * 算法要求:数组中有一个数字出现的次数超过了数组长度的一半,找出这个数字. * * 算法分析:我们需要计算数组中每个数字的出现次数.在PHP中我们可以使用in_array函数 * 来判断一个元素是否出现在数组中.比如数组中含有1,2,3三个元素,我们要判断1是否存在 * 可以使用in_array(1,$array)来判断,但是这样只能判断1出现了一次,因为对于含有数组 * 元素1
-
PHP用函数嵌入网站访问量计数器
这是一种方法实现计数器.想看另一种方法的请点击:[PHP]简单的网站访问量计数器实现 想看具体代码思路的也请点击上面的链接. 创建Embed-Count文件夹 在Embed-Count文件夹下面创建counter.inc.php文件,内容如下: <?php function counter(){ $counter = 0; //初始化变量 $max_len = 8; $lj = explode("/",$_SERVER["PHP_SELF"]); //超全局变
-
thinkPHP实现的验证码登录功能示例
本文实例讲述了thinkPHP实现的验证码登录功能.分享给大家供大家参考,具体如下: 使用thinkphp自带的验证,实现登录页面的账号密码+验证码的验证 <?php namespace Admin\Controller; use Think\Controller; use Think\Verify; class LoginController extends Controller{ public function login(){ if($_POST){ $obj = new Verify()
-
利用php获得flv视频长度的实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: function BigEndian2Int($byte_word, $signed = false) { $int_value = 0; $byte_wordlen = strlen($byte_word); for ($i = 0; $i < $byte_wordlen; $i++) { $int_value += ord($byte_word{$i}) * pow(256, ($byte_wordlen - 1 - $i)); } if
-
史上最全的PHP正则表达式（手机号需要加上177-***）
首先看下正则表达式思维导图: 一.校验数字的表达式 1 数字: ^[0-9]*$ 2 n位的数字: ^\d{n}$ 3 至少n位的数字: ^\d{n,}$ 4 m-n位的数字: ^\d{m,n}$ 5 零和非零开头的数字: ^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字: ^([1-9][0-9]*)+(.[0-9]{1,2})?$ 7 带1-2位小数的正数或负数: ^(\-)?\d+(\.\d{1,2})?$ 8 正数.负数.和小数: ^(\-|\+)?\d+(\.\
-
php+ajax+h5实现图片上传功能
本文实例为大家分享了php实现ajax图片上传的具体代码,供大家参考,具体内容如下 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="__PUBLIC__
-
jQuery插件uploadify实现ajax效果的图片上传
昨天做了一天的ajax效果的图片上传,就是想让自己学的更加的精一些,所以看了很多第三方的控件,最后还是选择了uploadify这个控件,主要原因是比较容易上手. 首先我们先参考别人的资料(我自己整理了一下) 可选项 需要参数类型 参数名字 解释 (布尔型) auto 当文件被添加到队列时,自动上传. (字符串) buttonImg 浏览按钮的背景图片路径. (字符串) buttonText 默认在按钮上显示的文本. (字符串) cancelImg 取消按钮的背景图片路径. (字符串) check
-
使用express+multer实现node中的图片上传功能
下文给大家介绍使用express+multer实现node中的图片上传功能,具体内容介绍如下所示: 在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中 在node中使用multer中间件来对上传路由接口进行处理 multer文档 package.json html部分 <body> <div class="form-group"> <label>File input
-
PHP+jQuery+Ajax实现多图片上传效果
今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上. HTML 我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传.#preview用来显示上传完毕后的图片.关于css样式设置本文不加说明,请参照下载包的源码. 复制代码 代码如下: <form id="imageform" met
-
java使用CKEditor实现图片上传功能
java如何使用CKEditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的CKEditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预览框中文本内容,并修改hidden属性值为显示上传选项卡 删除image.js中包含在双引号中的上述文本 将image.js中的hidden属性值改为0 3.修改ckeditor/config.js文件,配置"上传到服务器"按钮调用的controller接口 4."上传到服务器&
-
iOS实现压缩图片上传功能
本文实例为大家分享了iOS实现压缩图片上传功能,供大家参考,具体内容如下 #pragma mark - 打开相机 -(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{ UIImage *image = info[UIImagePickerControllerOriginalImage]; s
-
微信小程序基于腾讯云对象存储的图片上传功能
在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到保障.所以我们在经过慎重考虑觉得使用第三方的云存储服务. 在最开始的时候我们在腾讯云与阿里云中选择,最终我们选择腾讯云,腾讯云在文件上传用时方面的性能比较突出,文件越大表现越好:在下载用时方面表现略优于阿里云:文件删除用时方面总体速度略逊于,但在不同大小文件删除用时上都比较稳定.当然这与我们主要用于
-
vue中利用simplemde实现markdown编辑器（增加图片上传功能）
前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si
-
Vue2.0 实现移动端图片上传功能
本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none <input @change="fileChange($event)" type="file" id="upload_file" multiple
-
详解vue 图片上传功能
这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix"> <li v-if="imgs.length>0" v-for='(item ,index ) in imgs'> <img :src="item"> </li> <li style="position:relative