input[type=file]上传文件(格式判断、文件大小、上传成功后操作)

        var isUploadImg = false;
        //在input file内容改变的时候触发事件******************上传图片
        $(‘#filed‘).change(function(){
            var file = $(‘#filed‘).get(0).files[0];
            var fileSize = file.size,fileType = file.type;
            if (file.name.lastIndexOf(‘.‘)==-1){    //如果不存在"."
                $.dialog({content: ‘路径不正确‘, time: 2000});
                return false;
            }
            var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|.swf|";
            var extName = file.name.substring(file.name.lastIndexOf(".")).toLowerCase();//(把路径中的所有字母全部转换为小写)
            if(AllImgExt.indexOf(extName+"|")==-1)
            {
                $.dialog({content: ‘非法图片格式‘, time: 2000});
                return false;
            }
            //console.log(fileSize,fileType);
            if(fileSize<3145728){
                if(window.FileReader){
                    //创建用来读取此文件的对象
                    var reader = new FileReader();
                    //使用该对象读取file文件
                    reader.readAsDataURL(file);
                    //读取文件成功后执行的方法函数
                    reader.onload=function(e){
                        //读取成功后返回的一个参数e,整个的一个进度事件
                        console.log(e);
                        //选择所要显示图片的img,要赋值给img的src就是e中target下result里面
                        //的base64编码格式的地址
                        $(‘#imgshow‘).get(0).src = e.target.result;
                        isUploadImg = true;
                    }
                }
            }else{
                $.dialog({content: ‘图片大小超过限制‘, time: 2000});
                return false;
            }

        })

原文地址:https://www.cnblogs.com/qdlhj/p/9922256.html

时间: 2024-08-25 08:03:51

input[type=file]上传文件(格式判断、文件大小、上传成功后操作)的相关文章

JQuery------获取&lt;input type=&quot;file&quot;&gt;中的文件内容

html <div class="File">添加附件</div><input id="upfile" name="upfile" type="file" multiple="multiple" style="display:none" /> <div class="FileArea"></div> js v

上传文件按钮美化,上传文件前后状态控制

我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的. input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 注:input 的 type 为 file 时,它的 name 必须有值,因为这个 name 会做为上传文件信息的数组名称. <a href="javascript:;" class=&q

&lt;input type=&quot;file&quot;&gt; change事件异常处理办法

问题:最近发现一个奇怪的bug, 那就是在上传图片需要采用input type=file来进行文件选择.由于为了适应美工的UI图,所以是把选择文件的input框隐藏了.然后通过另外一个按钮的点击事件来触发input的选择事件.代码如下: <div style="width:120px;height:120px"> <img src="/image/uploadfile.png" style="width:100%;height:100%&

input type=&#39;file&#39; 上传文件 判断图片的大小是否合格与witdh 和 height 是否合格

function CheckFiles(obj) { var array = new Array('gif', 'jpeg', 'png', 'jpg'); //可以上传的文件类型 if (obj.value == '') { alert("让选择要上传的图片!"); return false; } else { var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用:) var isE

用jQuery重置用于文件上传的input (type=&quot;file&quot;)

页面中有如下标签: <input type="file" id="upload"/> 此标签本用于文件上传,现在有需要将其值重置为空.于是想当然地写出如下代码: $('#upload').val(''); 但经测试,该处理方法对IE无效,因为IE不允许javascript改变type为file的input的值,又是让人蛋疼的IE... 在浏览器兼容性方面本人是白痴一个,遂放狗一搜,有解决方案如下: if(ie) { // 此处判断是否是IE $('#up

input type=&#39;file&#39;限制上传文件类型

前端与后台数据进行对接时,就避免不了要使用ajax进行http请求,常用的请求就两个post与get:然而常见的post请求的需求是文件上传,可能我一说到文件上传大家都觉得so  easy啊,没什么嘛,就是几行 js 代码就能搞定的事.是的,简单的文件上传是可以直接使用FormData()对象将文件上传:如果问题只是这么简单就好了,可能大家也都遇到过上传文件类型的限制,不知道大家有没有注意到这么简单的方法将文件类型过滤,下面直接贴代码: 1. js实现:js实现上传文件类型的限制是将允许上传的文

html中,文件上传时使用的&lt;input type=&quot;file&quot;&gt;的样式自定义

Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多网页的风格都不太协调. 根据用户的需求,设计风格,改变其显示样式的场合就比较多了. 如果,要像下面一样做一个bootstrap风格的上传按钮该如何实现. 搭建上传按钮所需的基本元素 <span class=""> <span>上传</span> <

input type file onchange上传文件的过程中,遇到同一个文件二次上传无效的问题。

不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为input的value值,只有再内容发生改变的时候去触发,而value在上传文件的时候保存的是文件的内容,你只需要在上传成功的回调里面,将当前input的value值置空即可.event.target.value='';

javascript input type=file 文件上传

在JS中,input type=file 是常用的文件上传API,但感觉W3C说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为微信企业号本身想实现的功能也很纯粹,不需要太多乱七八糟的东西. 我这里只用了JQuery. 总结如下: 1.用户选择文件后,一般只显示一个fakepath,不会显示一个完整的文件目录.用$("input[type='file']")[0].files[0].name即可显示出文件名. 2.

js 实现 input type=&quot;file&quot; 文件上传示例代码

在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type="file" />隐藏,点其他的标签(图片等)来时实现选择文件上传功能. 看代码: 代码如下: <!DOCTYPE html> <html x