纯JavaScript下，能否用JSONP跨域传输<input type="file">选择的文件？

嘿，这个问题问得很到位！先给你明确的结论：JSONP根本没办法实现跨域传输文件对象或内容，而且它绝对不是这类场景的最佳选择。下面给你拆解原因，再给你纯JS的正确实现方案：

• JSONP的本质是通过动态插入<script>标签发起GET请求，但文件上传必须依赖POST（或PUT）请求——GET请求的URL长度有严格限制，而且无法安全地携带二进制文件数据。
• 就算是文本类文件，你把内容转成字符串拼在JSONP的URL参数里，不仅容易触发URL长度超限的问题，还会把敏感内容暴露在地址栏中；如果是图片、视频这类二进制文件，更是没法通过这种方式传递（Base64编码虽然能转字符串，但大文件的Base64会让URL变得异常庞大，同样会触发各种问题）。
• 你当前的代码只是加载了目标域名的脚本，完全没有把文件数据传递过去，这根本算不上文件传输操作。

现在跨域文件上传的标准、最优方案是CORS（跨源资源共享），配合FormData对象和原生XMLHttpRequest/fetch API实现，全程纯JS就能搞定，不需要任何框架。

纯JS实现代码示例 #

<input type='file' id='files' name='myfiles'/>

<script>
function handleFileSelect(evt) {
  // 获取选中的第一个文件（如果需要多文件上传，可遍历files数组）
  const selectedFile = evt.target.files[0];
  if (!selectedFile) return;

  // 创建FormData对象，模拟表单上传的格式
  const formData = new FormData();
  // 这里的键名"myfiles"要和后端接收的字段名保持一致
  formData.append('myfiles', selectedFile);

  // 使用原生XMLHttpRequest发起跨域POST请求
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'http://192.168.100.115:8700/is_selected/', true);

  // 监听请求状态，处理结果
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log('文件上传成功！后端响应:', xhr.responseText);
    } else {
      console.error('文件上传失败，状态码:', xhr.status);
    }
  };

  xhr.onerror = function() {
    console.error('请求发生网络错误');
  };

  // 发送携带文件的请求
  xhr.send(formData);
}

// 绑定文件选择事件
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

关键注意事项 #

• 你的后端服务（http://192.168.100.115:8700）必须配置CORS规则，允许前端域名的跨域请求，比如设置响应头：Access-Control-Allow-Origin: 你的前端域名（生产环境不建议用*允许所有域名）。
• 如果需要在请求中携带Cookie，要在XMLHttpRequest中添加xhr.withCredentials = true，同时后端要配置Access-Control-Allow-Credentials: true。

• JSONP仅适合跨域获取纯文本/JSON类数据的场景，完全不适合文件传输。
• CORS + FormData是当前跨域文件上传的标准方案，兼容性覆盖所有现代浏览器（包括IE10+），能安全传输各种类型的文件，是这类场景的最佳选择。

内容的提问来源于stack exchange，提问作者akhil viswam