js文件上传(py版)

最新推荐文章于 2023-08-18 10:31:52 发布

qwe303137085

最新推荐文章于 2023-08-18 10:31:52 发布

阅读量330

点赞数

分类专栏： js文件上传文章标签： js文件上传

本文链接：https://blog.csdn.net/qwe303137085/article/details/79238588

版权

js文件上传专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这几天写js文件上传，移动版的写得遇到点问题，最后解决了，觉得应该分享一下，我把我之前网页版的也放上来，大家觉得太弱了，那就直接略过吧

服务器端代码(python)：

class UploadFileHandler(tornado.web.RequestHandler):
    def get(self):
        self.set_header("Access-Control-Allow-Origin", "*")
        self.render("upload.html")

    def post(self):
        self.set_header("Access-Control-Allow-Origin", "*")
        file_metas = self.request.files["file"]  # 获取上传文件信息
        # for meta in file_metas:  # 循环文件信息
        #     file_name = meta['filename']  # 获取文件的名称
        #     import os  # 引入os路径处理模块
        #     with open(os.path.join('static', 'tmp', file_name), 'wb') as up:  # os拼接文件保存路径，以字节码模式打开
        #         up.write(meta['body'])  # 将文件写入到保存路径目录
        #         # self.write(os.path.join('static', 'tmp', file_name))
        #         self.render('upload_result.html', stu=file_name)
        #         # file_meta = self.request.files['file']
        upload_path = "static/tmp"
        for meta in file_metas:
            filename = meta['filename']
            print filename
            filepath = os.path.join(upload_path, filename)
            with open(filepath, 'wb') as up:  # 有些文件需要已二进制的形式存储，实际中可以更改
                up.write(meta['body'])
            stu = "tmp/%s" % meta['filename']
            #self.render('upload_result.html', stu=stu)
            self.write("http://192.168.1.104:8000/static/%s"%(stu))

客户端代码(网页版):

<!DOCTYPE html>
<html>
<head>
	<title>发送媒体</title>
	<script src="jquery-3.1.0.min.js"></script>
	<script>
		
 	function sendfiles(){
 		 var formData = new FormData($("#files")[0]);  
	     $.ajax({  
	          url: 'http://192.168.1.104:8000/upload',  
	          type: 'POST',  
	          data: formData,  
	          async: false,  
	          cache: false,  
	          contentType: false,  
	          processData: false,  
	          success: function (returndata) {  
				alert(returndata)
				console.log(returndata)
	          },  
	          error: function (returndata) {  
	              alert(returndata);  
	          }  
	          
	     });  
 	}
	
	</script>
</head>
<body>
	<form id="files">
		<input type='file' name='file'><br/>
		<input type="button" value="发送多媒体" οnclick="sendfiles()">
	</form>
	
	
</body>
</html>

客户端代码(移动版):

<body>
		<div class="only"></div>
		<header class="mui-bar mui-bar-nav j_header">
			<a class="mui-action-back back"><img class="j_back " src="../mysrc/images/left.png" /></a>
			<!--<a href="#" class="back" style="float: right;"><div class="j_search">发送</div></a>-->
			<div class="j_search">发送</div>
		</header>
		<div class="wrap">
			<div class="top">
				<textarea name="" class="text1" placeholder="这一刻的想法"></textarea>
				<div class="img">
					<ul class="wrapLi">
						<div class="one"><img οnclick="getImage()" class="pic1" src="../mysrc/images/camera.jpg"/></div>
						<!--<li class="li"></li>
						<li class="bg"></li>-->
					</ul>
					<div style="clear: both;"></div>
					<div class="bottom">
						<img src=""/>
						所在位置
					</div>
				</div>
			</div
		</div>
		<form>
			<input type="file">
			
		</form>
		<script type="text/javascript">
		var id = localStorage.getItem("sid");
		var frind=localStorage.getItem('key');//朋友圈
		var friend=localStorage.getItem('me_list');
//		var friend=localStorage.getItem('myNew');//我的朋友圈的原有数据,联系人获取过来的。
		var allData = localStorage.getItem('allData'); //查询全部数据
		var oPictrue=localStorage.getItem("imgIp");
		var mydate=localStorage.getItem("lianxi");
		var url=oPictrue+"/user";
		var txt=document.getElementsByClassName('text1')[0];
		var fa=document.getElementsByClassName("j_search")[0];
		var Mydate;//个人信息
//		console.log(frind);//朋友圈
//		var friend_json=JSON.parse(friend);//我的朋友圈数组		
	
		mydate=JSON.parse(mydate);
		console.log(mydate);
		
		var cli1;
		//获取自己的信息
		for(var i = 0; i < mydate.length; i++) {
					if(mydate[i].id==id){
						Mydate=mydate[i];	
						console.log(Mydate);
					}
		}
		//拍照录像
		function changeIndex() {
			//	outSet( "选择摄像头：" );
			ie.focus();
			console.log("选择摄像头***********")
		}
		
		
		//通过照相机来获取照片
		
		
		function getImage(){
			var cmr = plus.camera.getCamera(); //获取照相机
			var res = cmr.supportedImageResolutions[0];
			var fmt = cmr.supportedImageFormats[0];
			console.log("进入拍照")
      		cmr.captureImage(function(p){ //打开照相机
				console.log(p) //打印信息 _doc/1517463223165.jpg
					plus.io.resolveLocalFileSystemURL(p,function(entry){ //通过URL参数获取目录对象或文件对象
						console.log(entry)
						entry = entry.toLocalURL()
						createUpload(entry)
						
					},function(e){
						console.log("获取失败"+e.message)
					},function(e){
						console.log("失败"+e.message)
					},{
						filename: "_doc/camera/",
						index: 1
					});
				}
			);
			
		}
	
		 function createUpload(entry) {
                console.log(111111111);
                var task = plus.uploader.createUpload( "http://39.104.48.175:8000/upload", 
                    { method:"POST",blocksize:204800,priority:100 },
                    function ( t, status ) {
                        // 上传完成
                        console.log(t.url);
                        if ( status == 200 ) { 
                            alert( "Upload success: " + t.responseText);
                          
                        } else {
                            alert( "Upload failed: " + status );
                        }
                    }
                );
                task.addFile(entry, {key:"file"} );
                task.start();
            }

csdn太好用了，之前搭了个mediawiki，代码格式太难看了，上面的代码我都截取了一部分，写得不好的地方请见谅！！！

qwe303137085

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js文件上传(py版)

这几天写js文件上传，移动版的写得遇到点问题，最后解决了，觉得应该分享一下，我把我之前网页版的也放上来，大家觉得太弱了，那就直接略过吧服务器端代码(python)：class UploadFileHandler(tornado.web.RequestHandler): def get(self): self.set_header("Access-Control-Al
复制链接

扫一扫