首页 > Javascript > JS文件上传详解
2018
08-29

JS文件上传详解

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<input type="file" name="contractFileName" style="width: 500px;" onchange="fileChange(this);"/>

<script type="text/javascript">
    var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
    function fileChange(target,id) {
        var fileSize = 0;
        var filetypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"];
        var filepath = target.value;
        var filemaxsize = 1024*2;//2M
        if(filepath){
            var isnext = false;
            var fileend = filepath.substring(filepath.lastIndexOf("."));
            if(filetypes && filetypes.length>0){
                for(var i =0; i<filetypes.length;i++){
                    if(filetypes[i]==fileend){
                        isnext = true;
                        break;
                    }
                }
            }
            if(!isnext){
                alert("不接受此文件类型!");
                target.value ="";
                return false;
            }
        }else{
            return false;
        }
        if (isIE && !target.files) {
            var filePath = target.value;
            var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
            if(!fileSystem.FileExists(filePath)){
                alert("附件不存在,请重新输入!");
                return false;
            }
            var file = fileSystem.GetFile (filePath);
            fileSize = file.Size;
        } else {
            fileSize = target.files[0].size;
        }

        var size = fileSize / 1024;
        if(size>filemaxsize){
            alert("附件大小不能大于"+filemaxsize/1024+"M!");
            target.value ="";
            return false;
        }
        if(size<=0){
            alert("附件大小不能为0M!");
            target.value ="";
            return false;
        }
    }
</script>

</body>
</html>

以上就是校验js文件上传格式大小公共方法。

u=3930017310,647946563&fm=26&gp=0.jpg

-------------------------------------------------------

如何获取上传图片的真实大小?

var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
//通过FileReader获取文件尺寸
var reader = new FileReader();
reader.readAsDataURL(fileObj);
$("#img").attr("src",reader.result);
var Width = $("#img").width();
var Height = $("#img").height();

html部分

<img id="img" style="display: none;" />

-------------------------------------------------------

如何上传?

通过Ajax方式上传文件(input file),使用FormData进行Ajax请求

<div>
	<input type="file" name="FileUpload" id="FileUpload">
	<a class="layui-btn layui-btn-mini" id="btn_uploadimg">上传图片</a>
</div>
<script type="text/jscript">
       $(function () {
           $("#btn_uploadimg").click(function () {
               var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
               if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
                   alert("请选择图片");
                   return;
               }
               var formFile = new FormData();
               formFile.append("action", "UploadVMKImagePath");  
               formFile.append("file", fileObj); //加入文件对象
 
               //第一种  XMLHttpRequest 对象
               //var xhr = new XMLHttpRequest();
               //xhr.open("post", "/Admin/Ajax/VMKHandler.ashx", true);
               //xhr.onload = function () {
               //    alert("上传完成!");
               //};
               //xhr.send(formFile);
 
               //第二种 ajax 提交
 
               var data = formFile;
               $.ajax({
                   url: "",
                   data: data,
                   type: "Post",
                   dataType: "json",
                   cache: false,//上传文件无需缓存
                   processData: false,//用于对data参数进行序列化处理 这里必须false
                   contentType: false, //必须
                   success: function (result) {
                       alert("上传完成!");
                   },
               })
           })
       })
 
   </script>


作者:admin
admin
TTF的家园-www.ttfde.top 个人博客以便写写东西,欢迎喜欢互联网的朋友一起交流!

本文》有 0 条评论

留下一个回复