6.28 头像预览：form方法和ajax方法
2024-05-11 09:46:49
一用form实现头像预览
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><title>Document</title><style type="text/css">#sc{display:none;}#showing{width:100px;height:100px;background-image: url(../0626liucheng/upfile/1530091054aa.jpg);background-size:100% 100%;}#upfile{opacity:0;width: 100%;height: 100%;}</style> </head> <body><form action="chuli.php" method="post" id="sc_form" enctype="multipart/form-data" target="sc"><div id="showing"> <!-- target 属性规定在何处打开 action URL。--><input type="file" name="upfile" id="upfile" value="" οnchange="$('#sc_form').submit()"/></div></form><!--<iframe>标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。--><iframe id="sc" name="sc" src="" width="" height=""><!--PHP传过来的js代码--></iframe> </body> </html> <script type="text/javascript">//当提交表单时，会发生 submit 事件。/*function aa(){$("#sc_form").submit();}*/functionshowImage(url){//alert(url);$("#showing").css("background-image","url("+url+")");}</script>============================处理页面=======================================<?php //var_dump($_FILES['upfile']); $name = $_FILES['upfile']['name']; $type = $_FILES['upfile']['type']; $tmp_name = $_FILES['upfile']['tmp_name'];//储存的临时文件名，一般是系统默认。 $error = $_FILES['upfile']['error']; $size = $_FILES['upfile']['size']; if(!empty($name)){ if($error<=0){ if($type =="image/jpeg"){ if($size<=100000){ if(!is_dir("./upfile/")){ mkdir("./upfile/"); } $path ="./upfile/".$name; //转换编码格式 //$filename = iconv("UTF-8","gb2312",$filename); if(move_uploaded_file($tmp_name,$path)){ echo "<script> window.parent.showImage('{$path}');</script>"; //在iframe的父级当前页面调用js代码 } } } } }?>
二 用ajax方法实现头像预览
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script src="../public/ajaxfileupload.js" type="text/javascript" charset="utf-8"></script><style type="text/css">#showing{width:100px;height:100px;background-image: url(../0626liucheng/upfile/1530091054aa.jpg);background-size:100% 100%;}#upfile{opacity:0;width:100%;height: 100%;}</style> </head> <body><div id="showing"><input type="file" name="upfile" id="upfile" value="" title="上传附件" /></div><input type="button" value="上传" οnclick="upload()"/> </body> </html> <script type="text/javascript">functionupload(){var path = $("#upfile").val();if($.trim(path)==""){alert("请选择要上传的文件");return;}$.ajaxFileUpload({type:"post",url:"chuli2.php",//这是服务器处理的代码secureuri:false,//是否启用安全提交，默认为falsefileElementId:'upfile',//上传文件的id，name属性名dataType:"text",//返回值类型，一般设置为json，application/jsondata:{},//传递参数到服务器success:function(data){$("#showing").css("background-image","url("+data+")");}});$}</script><?php//var_dump($_FILES['upfile']);$name = $_FILES['upfile']['name'];$type = $_FILES['upfile']['type'];$tmp_name = $_FILES['upfile']['tmp_name'];//储存的临时文件名，一般是系统默认。$error = $_FILES['upfile']['error'];$size = $_FILES['upfile']['size'];if(!empty($name)){if($error<=0){if($type =="image/jpeg"){if($size<=100000){if(!is_dir("./upfile/")){mkdir("./upfile/");}$path ="./upfile/".$name;//转换编码格式//$filename = iconv("UTF-8","gb2312",$filename);if(move_uploaded_file($tmp_name,$path)){echo $path;}}}}}?>
转载于:https://www.cnblogs.com/sunhao1987/p/9240185.html
6.28 头像预览：form方法和ajax方法相关推荐
- 2018.7.9-注册及头像预览
谈一谈今天围绕form表单中遇到的问题 简单的form表单的创建这里就不多说了,首先我遇到的是一个验证码验证的问题,由于form表单需要写的东西很多,我将它单独做成了一个模块 贴上注册表单的内容: c ...
- 前端效果实现：修改头像预览
本文实现效果图如下: 1.点击页修改头像组件(图1) 2.弹出修改头像模态框 . 3.点击 选择文件 input[file] 元素,选择文件,显示预览头像 4.点击上传,实现修改头像预览效果并上传的 ...
- vue实现头像预览功能
一个小记录. 下面的html是使用了element-ui实现具体样式,但是选取图片文件需要用原生的input框.原生的样式很难修改,就可以将原生的input框隐藏起来,用elbutton触发原生的in ...
- Loader的load方法和loadBytes方法LoaderContext参数
(1)在看代码的时候还发现一个以前没有这么注意的问题,也mark一下. 关于Loader的load方法和loadBytes方法LoaderContext参数的问题.. 要加载某个SWF到自己的安全域内 ...
- hashcode()方法和equals()方法
一.hashcode()方法和equals()方法的介绍 Java的基类Object提供了一些方法,其中equals()方法用于判断两个对象是否相等,hashCode()方法用于计算对象的哈希码.eq ...
- 为什么要重写hashcode方法和equals方法
为什么要重写hashcode方法和equals方法 我们可能经常听到说重写equals方法必须重写hashcode方法,这是为什么呢?java中所有的类都是Object的子类,直接上object源码 ...
- 第二百五十八节，Tornado框架-逻辑处理get()方法和post()方法，初识模板语言
Tornado框架-逻辑处理get()方法和post()方法,初识模板语言 Tornado框架,逻辑处理里的get()方法,和post()方法 get()方法,处理get方式的请求 post()方法, ...
- python predict_对Keras中predict()方法和predict_classes()方法的区别说明
1 predict()方法 当使用predict()方法进行预测时,返回值是数值,表示样本属于每一个类别的概率,我们可以使用numpy.argmax()方法找到样本以最大概率所属的类别作为样本的预测标 ...
- Keras中predict()方法和predict_classes()方法的区别
正如上篇博客中所讲,在Keras框架下执行深度学习任务时,一般会先根据训练数据集训练出模型,然后拿训练好的模型到生产环境(测试集)中部署并生产.以分类问题为例,当训练好了分类模型之后,我们要用这个模型 ...
最新文章
- 【OpenCV 4开发详解】直方图操作
- java流的写法_java IO-过滤流类的写法
- Sencha Touch 2.3 自定义主题皮肤,颜色
- Spring提取@Transactional事务注解的源码解析
- java基础 第九章（设计模式 单例模式）
- mongodb 安装与卸载
- spring cloud架构 - HongHu common-service 项目构建过程
- WEB入门实践-张晨光-专题视频课程
- 程序员应该多逛的几个技术网站
- Blob和Clob的区别和用法
- android视频压缩框架,GitHub - tangpeng/VideoCompressor: Android 使用自带的MediaCodec 框架进行本地视频压缩，速度嗖嗖的，亲测有效！！！...
- 「数字电子技术基础」6.触发器
- 计算机鼠标知识,计算机基础知识：鼠标的使用
- [转]Xmanager连接Linux远程桌面(后面添加了自己的部分)
- 无线广播风暴问题定位分析（omnipeek工具）
- 程序员面试需要带身份证和毕业证原件吗
- 利用大数据打造智慧港航运
- java中循环里使用throw new抛出异常问题
- python从属关系编号_42：对象、类、以及从属关系
- c语言实现 自动访问网址,使用C语言实现网站开发