叫刘哥哥 记录,分享 联系方式:liuyingshengc4@sina.cn QQ:894347276

【收藏】纯js 上传文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>XMLHttpRequest上传文件</title>
    <script type="text/javascript">
        //图片上传
        var xhr;
        //上传文件方法
        function UpladFile() {
            var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
            var url =  "http://localhost:8080" + "/api/attachment/upload"; // 接收上传文件的后台地址

            var form = new FormData(); // FormData 对象
            form.append("file", fileObj); // 文件对象

            xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
            xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
            xhr.onload = uploadComplete; //请求完成
            xhr.onerror =  uploadFailed; //请求失败

            xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
            xhr.upload.onloadstart = function(){//上传开始执行方法
                ot = new Date().getTime();   //设置上传开始时间
                oloaded = 0;//设置上传开始时,以上传的文件大小为0
            };

            xhr.send(form); //开始上传,发送form数据
        }

        //上传成功响应
        function uploadComplete(evt) {
            //服务断接收完文件返回的结果

            var data = JSON.parse(evt.target.responseText);
            if(data.success) {
                alert("上传成功!");
            }else{
                alert("上传失败!");
            }

        }
        //上传失败
        function uploadFailed(evt) {
            alert("上传失败!");
        }
        //取消上传
        function cancleUploadFile(){
            xhr.abort();
        }


        //上传进度实现方法,上传过程中会频繁调用该方法
        function progressFunction(evt) {
            var progressBar = document.getElementById("progressBar");
            var percentageDiv = document.getElementById("percentage");
            // event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0
            if (evt.lengthComputable) {//
                progressBar.max = evt.total;
                progressBar.value = evt.loaded;
                percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
            }
            var time = document.getElementById("time");
            var nt = new Date().getTime();//获取当前时间
            var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差,单位为s
            ot = new Date().getTime(); //重新赋值时间,用于下次计算
            var perload = evt.loaded - oloaded; //计算该分段上传的文件大小,单位b
            oloaded = evt.loaded;//重新赋值已上传文件大小,用以下次计算
            //上传速度计算
            var speed = perload/pertime;//单位b/s
            var bspeed = speed;
            var units = 'b/s';//单位名称
            if(speed/1024>1){
                speed = speed/1024;
                units = 'k/s';
            }
            if(speed/1024>1){
                speed = speed/1024;
                units = 'M/s';
            }
            speed = speed.toFixed(1);
            //剩余时间
            var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
            time.innerHTML = ',速度:'+speed+units+',剩余时间:'+resttime+'s';
            if(bspeed==0) time.innerHTML = '上传已取消';
        }
    </script>
</head>
<body>
<progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
<span id="percentage"></span><span id="time"></span>
<br /><br />
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上传" />
<input type="button" onclick="cancleUploadFile()" value="取消" />
</body>
</html>


作者:营生 分类:JavaScript 浏览:4821 评论:0

HTML video 标签 删除下载按钮控件

在页面 style.cc 中添加

video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}

刷新OK

作者:营生 分类:JavaScript 浏览:2388 评论:0

关于手机HTML音频播放,手机锁屏之后不自动播放问题

上代码

<audio id="audio" src=""></audio>

这个是公共播放的盒子,js直接赋值src play(),手机锁屏之后无法播放。

修改后的

<audio id="pub_audio" >
	<source id="audio_src" src="" type="audio/mpeg">
</audio>

js赋值audio_src  attr('src' , '');

$('#pub_audio').load();
$('#pub_audio').play();

音频文件放入资源中必须load 再播放否则报错

作者:营生 分类:JavaScript 浏览:2832 评论:0

关于JS 跨域问题的解决方法

前段时间写了个项目涉及到文件上传。

文件服务器在磁盘满了之后就会自动更换,上传使用的是JS上传,并没有使用PHP FTP 上传。

中间就出现了跨域接收数据问题。

在网上看了下也很容易解决:

image.png

只要在输出字符串之前指定访问地址 *即可。

作者:营生 分类:JavaScript 浏览:3989 评论:0

win server 2012 IIS fileupload上传大文件出现404

        1、打开IIS管理器,找到自己发布的网站,先把它停止,然后打开“请求筛选”

        


       2、点击右边的“编辑功能设置”,打开“编辑请求筛选设置”对话框。 其中的允许的最大容量长度,默认是”30000000“,约30M,将其修改为你所需要的大小即可。
        

作者:营生 分类:JavaScript 浏览:5040 评论:0

jquery fileupload 设置

<script type="text/javascript">
	
	var uploader = $("#fileupload");
	uploader.fileupload({		
	    url : "${base}/sys/attachment-file!uploadMulti",		
	    dataType : 'json',		
	    autoUpload : false,		
	    maxNumberOfFiles : 5,		
	    fileInput : uploader.find("input:file"),		m
	    axFileSize : 5000000,		
	    previewMaxWidth : 200,		
	    previewMaxHeight : 200
	});
	uploader.bind('fileuploaddone', function(e, data) {		
	        var json = data.result;		/* alert(json.userdata.fileRealName);
		alert(json.userdata.id); */
		alert(json.userdata.fileRealName);
		alert(json.userdata.id);
	});
	uploader.bind('fileuploadfailed', function(e, data) {		
	        //eva.p(data);
	});
	uploader.bind('fileuploadadded', function(e, data) {		
	        if (!data.files.valid) {			
	            //uploader.find('.files .cancel').click();
		}
	});
	uploader.bind('fileuploadchange', function(e, data) {		
	        //uploader.find('.files').empty();
	});</script>


作者:营生 分类:JavaScript 浏览:2509 评论:0

ios 9.几版本 微信内置浏览器 jQuery 兼容性问题 onclick 失效

ios 9系统版本

微信内部测试网站 jQuery返回数据无法作为json 解析

无法解析代码

		        $.post(
				"url",
				{'quyu' : 1},
				function(data){
                                    alert(data)
				},"json"
		         );

干脆不指定类型,直接eval返回

	$.ajax({
		url: 'url',
		type: "POST",
		data: {'quyu' : 1},
		beforeSend: function () { },
		success: function (res) {
			var data = eval("("+res+")");
		}
	})

ajax 和 post 都是jQuery 封装的方法,这没啥区别。


另外如果点击失效: 可以在Css 给点击加入cursor:pointer; 光标属性。

执行后代码正常在ios9版本微信内置浏览器中执行。

作者:营生 分类:JavaScript 浏览:3010 评论:0

jQuery 各版本下载地址


jquery-2.1.4 (注!jquery-2.0以上版本不再支持IE 6/7/8)

百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况) 

jquery-3.1.1(最新)

官网jquery压缩版引用地址:

1

jquery-3.1.1下载

jquery-3.0.0

官网jquery压缩版引用地址:

1

jquery-3.0.0下载

jquery-2.1.4

百度压缩版引用地址:

1

微软压缩版引用地址:

1

官网jquery压缩版引用地址:

1

jquery-2.1.4下载

jquery-2.1.1

百度压缩版引用地址:

1
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script

QRcode js 生成二维码

qrcode.js 下载地址:下载

<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="/js/qrcode.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            width : 200,//设置宽高
            height : 200
        });
        //生成链接地址
        qrcode.makeCode('{:$link}');
	})
</script>
<script type="text/javascript">

也可以使用第三方api 来实现二维码展示

作者:营生 分类:JavaScript 浏览:2657 评论:0

js 身份证号码验证方法

js代码:

function IdentityCodeValid(code) { 
	var city={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "};
	 var tip = "";
	 var pass= true;
	 
	 if(!code || !/^d{6}(18|19|20)?d{2}(0[1-9]|1[12])(0[1-9]|[12]d|3[01])d{3}(d|X)$/i.test(code)){
	    tip = "身份证号格式错误";
	   pass = false;
	  }
	 
	 else if(!city[code.substr(0,2)]){
	    tip = "地址编码错误";
	   pass = false;
	  }
	  else{
	    //18位身份证需要验证最后一位校验位
	   if(code.length == 18){
	    code = code.split('');
	    //∑(ai×Wi)(mod 11)
	  //加权因子
	 var factor = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ];
	  //校验位
	 var parity = [ 1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2 ];
	  var sum = 0;
	  var ai = 0;
	  var wi = 0;
	  for (var i = 0; i < 17; i++)
	  {
	  ai = code[i];
	  wi = factor[i];
	  sum += ai * wi;
	  }
	  var last = parity[sum % 11];
	  if(parity[sum % 11] != code[17]){
	  tip = "校验位错误";
	 pass =false;
	  }
	  }
	  }
	  if(!pass) alert(tip);
	  return pass;
}


作者:营生 分类:JavaScript 浏览:2148 评论:0

承接外包,【微信小程序/公众号/网站开发/APP开发/iOS/Android/技术难点解决】
联系方式:邮箱:liuyingshengc4@sina.cn QQ:894347276
Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero