input的文件上传图片

<img id="headIMG" src="img/header_default.jpg"/>
<input type="file" name="upload_head" id="inputFile">
                        <script>
                $(document).ready(function() {
                    $("#inputFile").change(function() {
                        var fil = this.files;
                        for(var i = 0; i < fil.length; i++) {
                            reads(fil[i]);
                        }
                    });
                });
                function reads(fil) {
                    var reader = new FileReader();
                    reader.readAsDataURL(fil);
                    reader.onload = function() {
                        document.getElementById(‘headIMG‘).setAttribute(‘src‘,reader.result);
                    };
                }
            </script>

复制代码查看效果

时间: 2024-12-19 13:34:28

input的文件上传图片的相关文章

文件上传图片

通过 PHP,可以把文件上传到服务器.里面加入一些图片的判断,如果不加判断文件的类型就可以上传任意格式的文件.为了网站的安全,肯定不让上传php文件,如果有人进入你的后台,上传了一个php文件,你的网站源码,全部救变成他的了,直接打包看你的代码.所以一定要控制上传的目录与文件类型,一般只可以上传图片.要实现文件上传图片我们需要写出两个php文件,第一个php文件我们需要写出一个文件上传的页面,第二个php文件我们写出实现图片上传的功能 1 <!DOCTYPE html PUBLIC "-/

前端实现input[type=&#39;file&#39;]上传图片预览效果

众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现:一是前后台交互,后台将图片地址返回前端: 二是,我今天写的内容,使用FileReader对象--允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容:此种方法可以优化图片加载速度,减少方法一占用带宽的问题: 但是,此种方法兼容性存在问题,主要是IE浏览器(ie10以上没问题

&lt;input type = file/&gt;上传图片限制大小、类型判断、像素判断

<input type = file/>上传图片限制大小.类型判断.像素判断 在项目中经常用到input标签来上传文件,而这些文件通常是图片文件.图片有很多格式我们只需要其中的几种,就需要对用户上传的文件进行验证,在HTML5中有一个新的属性:accept文件类型限制.但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制.类型判断.像素判断 <!DOCTYPE html> <html> <head> <meta charse

js 实现 input file 文件上传

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery/jquery-1

input标签file文件上传图片,获取base64

<input type="file" name="img-up" id="img-up" value="" /> $("#img-up").on("change",function () { if(this.files[0]){ getImgBase64Data(this.files[0], function (result) { console.log(result); }

aspx页面中用Input 标签实现上传图片功能

实现上传图片功能需单独的建立一个aspx页面, 其中前台页面需要注意两点: a)实现上传功能的input的type="file" b)设置请求报文头为 enctype="multipart/form-data" 类型 前台代码如下: <form method="post" enctype="multipart/form-data"> <table class="list"> <

如何使用PHP上传文件,上传图片,php上传教程,php表单文件上传教程

使用PHP进行文件上传,主要使用到表单功能和PHP内置的$_FILES函数功能.接下来我们看如何实现PHP上传功能.例子效果图,此例子是在Mac下进行调试成功的. PHP上传图片文件的功能代码如下: <html> <head> <meta charset="utf-8"> <title>Upload File Example</title> <style> body{ width:500px; margin:20p

上传文件 上传图片 源码跟思路

上传图片   代码(运行效果可见上传HTML文件) 上传文件 (也就几行,注释掉都是为了好理解,不用写)

仿照Bootstrap的input 修改 upload上传图片的样式

html: <div class="form-group">     <label class="col-sm-3 col-sm-6 control-label">图片</label>     <span class="problem-must"> </span>     <div class="col-sm-8">         <a class