用jQuery获取HTML属性值

Question

我正在直接将文件上传到Amazon S3。 页面输入中已经有第二个输入标签，但是只有在文件上载到S3存储桶时，才会插入具有值的第一个输入标签。

我想用jquery从第一个输入标签中获取id和filename值，以便能够将它们插入URL路径。 如何获得这些价值？

<span class="btn btn-success btn-sm btn-file">Choose image
  <input value={'id': '55e3385361c84c81c98087907e3f424ff4db6dac412cdcadf40090c04c25',
                'filename': 'firstlogo.png', 
                'content_type':'image/png',
                'size':43393}" 
         data-reference="d105c8c6fd72880c844dc61cb52b0639" 
         type="hidden" 
         name="product[product_image]">
  <input presigned="true" 
         direct="true" 
         class="choose-product-file" 
         data-direct="true" 
         data-as="file" 
         data-url="/attachments/cache/presign" 
         data-presigned="true" 
         data-reference="d105c8c6fd72880c844dc61cb52b0639" 
         accept=".png,.jpg,.jpeg" 
         type="file" 
         id="product_product_image">
</span>

Answer 1

如果您将id和filename存储在第一个输入标签的值中，请首先获取该值的JSON.stringify版本，然后将其解析为json ，然后分别从parsed JSON值中提取id和filename 。第一个输入标签。

检查下面的我的工作代码段。

---

片段：

 $(document).ready(function() { this_var = $('input#first').val(); json = JSON.stringify(eval("(" + this_var + ")")); json = JSON.parse(json); var temp = $('#print').text(); temp += "id:" + json["id"] + "<br>"; temp += "filename:" + json["filename"] + "<br>"; $('#print').html(temp); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="btn btn-success btn-sm btn-file">Choose image <input id="first" value="{'id': '55e3385361c84c81c98087907e3f424ff4db6dac412cdcadf40090c04c25', 'filename': 'firstlogo.png', 'content_type':'image/png', 'size':43393}" data-reference="d105c8c6fd72880c844dc61cb52b0639" type="hidden" name="product[product_image]"> <input presigned="true" direct="true" class="choose-product-file" data-direct="true" data-as="file" data-url="/attachments/cache/presign" data-presigned="true" data-reference="d105c8c6fd72880c844dc61cb52b0639" accept=".png,.jpg,.jpeg" type="file" id="product_product_image"> </span> <div id="print"></div> 

Answer 2

解：

获取输入的值，将其转换为JSON，获取数据

let value = $('.btn input:first-child').val();
let data = JSON.parse(value.replace(/'/g, '"'));

// values needed
let id = data.id;
let filename = data.filename;

Answer 3

只需按类别评估跨度，然后选择所需的子级属性即可。

$('.btn').children().last().attr('id');

Answer 4

这应该获得您正在寻找的值：

 $('.btn input').last().data('url')
 $('.btn input').last().attr('id')