如何通过js注入的方式,完成表单的自动填写,和图片上传

这个是 快手创建直播的页面

img

地址是 https://studio.kuaishou.com/live/new
写一段js,对这个表单进行填写,上传图片,并进行提交

图片存储位置固定吗

py 直接解决, 非要用js 吗 ?

其中图片 可以使用指定位置的图片,如 d:\1.jpg,也可以使用base64。

你想要通过JavaScript注入的方式完成表单自动填写和图片上传,首先要了解网页的结构和表单的属性,然后才可使用JavaScript代码操作DOM元素和文件上传。
以下是一个参考示例,展示如何使用JavaScript注入的方式自动填写表单和上传图片:

#1、自动填写表单
// 获取表单元素  
const form = document.querySelector('#my-form');  
  
// 获取输入框元素并设置值  
const nameInput = document.querySelector('#name');  
nameInput.value = 'John Doe';  
  
// 获取单选框元素并设置选中状态  
const genderInput = document.querySelector('#gender');  
genderInput.checked = true;  
  
// 获取复选框元素并设置选中状态  
const interestsInput = document.querySelectorAll('#interests input');  
interestsInput[0].checked = true;  
interestsInput[2].checked = true;  
  
// 提交表单  
form.submit();
#2、上传图片
// 获取文件上传元素  
const fileInput = document.querySelector('#image-upload');  
  
// 创建一个文件对象  
const file = new File(['Hello, world!'], 'hello.txt', { type: 'text/plain' });  
  
// 模拟选择文件并设置文件对象  
fileInput.files = [file];  
  
// 创建FormData对象并模拟上传文件  
const formData = new FormData();  
formData.append('image', file);  
fetch('/upload', {  
  method: 'POST',  
  body: formData  
});
#如有帮助,恭请采纳
  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/947252
  • 你也可以参考下这篇文章:解决js获取当前时间精确到秒并格式划成数字(20200712120610)
  • 除此之外, 这篇博客: JS中执行上下文与作用域【⭐️重点理解】讲执行上下文最详细的博文中的 代码段六【块级作用域-块内函数】 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • console.log(foo);   // undefined
    if(true){
        function foo(){
            console.log("in");
        }
    }
    foo();      // in
    

      进入块级作用域前的工作结果如下:【注意】以下结果是在谷歌浏览器下的实验结果,其他浏览器可能不一致。

    块级作用域前期工作

      进入块级作用域后会创建一个文本环境插入到当前的文本环境中。然后就是进行块作用域的分析过程,如下图,找到块中顶级的函数声明或 let const 变量声明,这段代码中只有函数声明,函数的声明会创建函数对象,(注意在全局作用域分析中虽然找到了块内的函数声明,但是初始化为 undefined ,没有用到函数对象的地址)并且函数对象中有记录创建函数时的执行环境 [[environment]]。并在块作用域中登记函数名,赋值为刚刚创建的函数对象。

    块级作用域前期工作

      在退出块作用域时,如果块里面的文本环境记录的变量名与全局对象里记录的变量名有重复,则会先把块里面的文本环境记录的变量名的值覆盖掉全局对象中同名的变量值,再把创建的块记录环境给销毁掉,并把原来的链接接回执行上下文栈。注意这里块的文本环境被函数对象所引用了,所以不会销毁。

    退出块1
    退出块2

      退出块作用域后下一个语句是 foo 函数调用,函数调用会创建函数执行上下文,文本环境会以函数对象创建时保存的文本环境为父,并需要修改当前执行上下文指向 foo 函数执行上下文。

    调用函数

      最后执行 foo 函数内部的语句打印 “in” 。结束代码段。

//使用 JavaScript 和 FormData 对象自动填写表单并上传图片:

// 获取表单元素

var form = document.querySelector('#myForm');

// 获取 input 元素并填入值

var input = form.querySelector('#input');

input.value = '填入的值';

// 获取文件输入元素并添加文件

var fileInput = form.querySelector('#fileInput');

var file = new File(['file content'], 'filename.txt', {type: 'text/plain'});

fileInput.files = new FileListItems([file]);

// 创建 FormData 对象并添加表单数据

var formData = new FormData(form);

// 使用 XMLHttpRequest 发送表单数据

var xhr = new XMLHttpRequest();

xhr.open('POST', '/submit-form');

xhr.send(formData);

//代码根据你自己的需求进行改动。

注入JS代码来自动填写表单和上传图片是一种常用的自动化测试方法。以下是一个使用JavaScript注入实现表单填写和图片上传的示例代码:

// 自动填写表单
document.getElementById("name").value = "John Doe";
document.getElementById("email").value = "johndoe@example.com";
document.getElementById("message").value = "This is a test message.";

// 自动上传图片
var fileInput = document.getElementById('file-input');
var file = new File(['test image'], 'test_image.jpg', { type: 'image/jpeg' });
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);

在这个示例中,我们使用 document.getElementById 方法访问表单元素的ID来获取值并填充表单,然后我们使用 FileFormData 对象来实现上传文件。请确保你正确指定了文件的名称、文件的类型和表单的提交URL。

需要注意的是,自动化测试是一个违反网络服务条款的行为,请仅在合法的和被允许的前提下使用此方法。

javascript 自动填写表单的实现方法

第一步:
在页面查看源代码,把Form中包含的需要填列的HTML控件找出来如:
<form name="mainfrm" action="" method="post">
<input type="text" name="username"/>
<input type="submit" value="submit"/>
</form>
第二步:编写代码
javascript:mainfrm.username.value="stangray";mainfrm.submit.focus();
第三步:
打开浏览器的“收藏夹”,在“链接”分类中添加一个URL收藏。
在URL项中:加入上面编写的代码,也可以指定快捷键,在名称中填写“自动填表”(上面是在IE浏览中设置,不同的浏览器收藏夹使用会不一样,但都差不多)
第四步:测试
在浏览器中打开你要填写表单的网址,然后点击“链接”栏(这个菜单栏在输入地址栏的右边 源码天空,
取消锁定工具栏后,可以把他拖出来)中的“自动填表”链接,就可以了。
有你的智慧来修改代码吧!可以实现更多功能。

普通的js实现自动提交表单的方法是,通过 document.getElementById() 方法获取表单元素,并使用 JS 修改其值,
获取表单元素
var form = document.getElementById("myForm");
提交表单
form.submit();
如果是第三方网站,使用js注入的方式,我没有实现过。你或许可以考虑使用自动化的一些方法,通过程序模拟人的输入实现自动提交表单。

地址和图片不一样

通过JavaScript注入的方式可以实现表单的自动填写和图片上传。下面是一个示例代码:

// 自动填写表单
document.getElementById("input1").value = "自动填写的值";

// 图片上传
var inputFile = document.getElementById("fileInput"); // 获取文件上传的input元素
var fileToUpload = new File(["path/to/image.jpg"], "image.jpg"); // 创建要上传的文件对象
var formData = new FormData(); // 创建一个FormData对象
formData.append("image", fileToUpload); // 将文件对象添加到FormData对象中
var xhr = new XMLHttpRequest(); // 创建一个AJAX请求对象
xhr.open("POST", "/upload"); // 设置请求的URL
xhr.send(formData); // 发送请求

请注意,上述代码中的"input1"和"fileInput"是示例中的id属性值,你需要根据实际情况来替换为你要操作的表单元素的id属性值。

对于自动填写表单,你可以通过JavaScript中的value属性来设置输入框的值。你只需要找到相应的输入框元素,并将要填写的值赋给value属性即可。

对于图片上传,你可以使用File和FormData对象来实现。首先,你需要创建一个File对象,其中第一个参数是要上传的文件的数据,第二个参数是要上传的文件的文件名。然后,你可以创建一个FormData对象,并使用append方法将文件对象添加到其中。最后,你可以使用XMLHttpRequest对象来发送带有FormData对象的POST请求,以将文件上传到服务器。

请注意,由于安全性的原因,浏览器可能会限制通过JavaScript自动填写表单和上传文件。在实际应用中,你需要确保这些操作符合浏览器的安全策略,并遵循相关的数据保护规定。