16
2018
05

【收藏】纯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>


17
2018
01

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

18
2017
12

关于手机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 再播放否则报错

23
2017
05

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

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

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

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

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

image.png

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

16
2017
05

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

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

        


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

05
2017
05

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>


15
2017
03

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版本微信内置浏览器中执行。

15
2017
03

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 作者:营生 | 分类:JavaScript | 浏览:2729 | 评论:0