layui upload 额外参数上传

layui 2.0.x upload 额外参数上传

 

   <div class="layui-inline" style="margin-top: 5px;">
					  <label class="layui-form-label">机型</label>
						<div class="layui-input-block">
					      <input type="radio" name="type" lay-filter="radio-type" value="0" title="andorid" checked>
					      <input type="radio" name="type" lay-filter="radio-type" value="1" title="iOS" >
					    </div>
				    </div>
	     <div class="layui-inline">
	      <label class="layui-form-label">版本描述</label>
	      <div class="layui-input-inline">
	       <input type="text" name="description"   id="description"  placeholder="请输入" autocomplete="off" class="layui-input">
	       </div>
	    </div>
	    
	<div class="layui-inline" >
	<div class="layui-upload">
	  <button type="button" class="layui-btn layui-btn-normal" lay-data="{accept: 'file'}" id="test8">选择文件</button>
	  <button type="button" class="layui-btn" lay-data="{accept: 'file'}"  id="test9">开始上传</button>
	</div> 
	 </div>

 

 

layui.use(['upload','element','form'], function () {
    
    var $ = layui.jquery
	  , form = layui.form 
	  ,element = layui.element
       upload = layui.upload;
    
   // console.log(_jsonDate)
  //选完文件后不自动上传
  upload.render({
	method: 'post'
	//,data:_jsonDate
	,elem: '#test8'
    ,exts:'json'
    ,url: '${ctx}/upload/uploadfile.do'
    ,auto: false
    //,multiple: true
    ,bindAction: '#test9'
    ,before: function(input){  
    	 var data = {};  
    	 data.type = $('input:radio:checked').val();
    	 data.description = $('#description').val();  
    	 this.data=data;
    }
    ,done: function(res){ 
      var html = formatJson(JSON.stringify(res)); 
    //  console.log(html);
      $('#show_json').empty();
      $('#show_json').html('<pre class="layui-code">' +html+'</pre>');
      
    },success: function(msg){ 
    }
  });
  
});

 

 

在 before 前面添加  this.data 即可   (2.0.x)

 ,before: function(input){  
    	 var data = {};  
    	 data.type = $('input:radio:checked').val();
    	 data.description = $('#description').val();  
    	 this.data=data;
    }

(1.0.x)

function setdata(input,data){
	var item=[];
	$.each(data,function(k,v){
		item.push('<input type="hidden" name="'+k+'" value="'+v+'">');
	})
	$(input).after(item.join(''));
}

 查看 layui  upload.js  里面有 1.0.x 这种方法,2.0.x 优化了,不需要 开发者添加 input hidden 了

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

捐助开发者 

在兴趣的驱动下,写一个免费的东西,有欣喜,也还有汗水,希望你喜欢我的作品,同时也能支持一下。 当然,有钱捧个钱场(支持支付宝和微信 以及扣扣群),没钱捧个人场,谢谢各位。

 

个人主页http://knight-black-bob.iteye.com/



 
 
 谢谢您的赞助,我会做的更好!

### Layui Upload 组件与 Flask 后端交互传递参数 在Web开发中,前端框架与后端服务之间的通信至关重要。当使用Layui上传组件与Flask作为后端时,可以通过配置`data`字段来向服务器传递额外参数[^2]。 #### 前端实现 (HTML + JavaScript) 为了使Layui上传组件能够携带自定义参数到Flask后台,在初始化该插件的时候可以设置`field`属性指定文件域名称,并通过`data`选项添加其他想要发送的信息: ```html <!-- HTML --> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">图片</label> <div class="layui-input-block"> <!-- lay-data 是必填项 --> <button type="button" class="layui-btn" id="test1">上传图片</button> </div> </div> </form> <script src="/static/layui/layui.js"></script> <script> layui.use('upload', function(){ var upload = layui.upload; // 执行实例 upload.render({ elem: '#test1' // 绑定元素 ,url: '/upload' // 接收上传文件的服务接口路径 ,method:'post' ,data:{token:'mysecretkey'} // 自定义参数 ,done: function(res){ console.log(res); } }); }); </script> ``` 上述代码片段展示了如何利用Layui的API创建一个带有附加参数(如`token='mysecretkey'`)的文件上传表单。 #### 后端接收 (Python - Flask) 对于接收到这些来自客户端的数据,可以在Flask视图函数里解析请求中的表单数据和文件流。下面是一个简单的例子说明怎样获取并保存上传来的图像文件及其关联的元数据: ```python from flask import request, jsonify import os @app.route('/upload', methods=['POST']) def upload_file(): if 'file' not in request.files or 'token' not in request.form: return jsonify({'error': 'No file part'}) file = request.files['file'] token = request.form.get('token') if file.filename == '': return jsonify({'error': 'No selected file'}) filename = secure_filename(file.filename) filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename) file.save(filepath) response_data = { "message": f"{filename} has been uploaded successfully.", "path": filepath, "received_token": token } return jsonify(response_data), 200 ``` 这段脚本首先验证是否存在必要的输入项——即文件本身以及随同上传过程一起提交的身份令牌;接着读取它们的内容并将文件存储于服务器本地磁盘之上;最后构建JSON格式的消息反馈给调用方告知操作结果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值