JS实现文件上传指的是利用JavaScript编写代码来实现用户在网页上上传文件到服务器的功能。不需要借助任何插件即可通过浏览器原生的HTML和JavaScript来完成这一过程，这在现代Web开发中非常常见。以下将详细介绍相关的知识点：
### 文件上传知识点
1. **HTML文件输入元素(input:file)**
- 文件上传的HTML基础是`<input type="file">`，它允许用户选择一个文件，一旦用户选择了文件，文件就会被提交到服务器。
- 这个元素通常看起来是一个按钮或链接，点击它会打开一个对话框供用户选择文件。
2. **隐藏文件输入元素**
- 在某些情况下，开发者可能会选择隐藏`<input type="file">`元素，以便只通过自定义的按钮来触发文件选择。
- 为了隐藏这个元素，可以使用CSS样式来设置透明度，例如`opacity: 0;`。
3. **触发点击事件**
- 在隐藏`input:file`元素的情况下，由于安全原因，一些浏览器如Chrome不允许通过编程方式触发点击事件。
- 但可以通过设置透明度为0并手动触发`click`和`change`事件的方式来绕过这个限制。
4. **浏览器兼容性问题**
- 在IE6和IE7这样的旧版浏览器中，`input:file`元素不支持`onchange`事件，因此需要特殊处理。
- 在这些浏览器中，可以使用一个已经设置了值的`input:file`元素，通常这个值为空字符串。
5. **JavaScript交互**
- 使用JavaScript来控制文件上传的流程，例如在用户点击自定义的上传按钮后，通过JavaScript来触发隐藏的`input:file`的`click`事件。
- 当文件被选中后，可以通过监听`change`事件来获取用户选择的文件信息，并进行后续处理，如预览文件、上传文件到服务器等。
6. **安全限制**
- 浏览器的安全策略可能会限制隐藏的文件输入元素，如Chrome的安全策略就禁止了通过编程方式点击隐藏的文件输入元素，以防止滥用或不安全的文件操作。
7. **操作示例**
- 在HTML中，需要一个自定义的按钮和一个隐藏的`input:file`元素。
- 使用JavaScript来监听自定义按钮的点击事件，并触发隐藏`input:file`的`click`事件。
- 当文件被用户选中后，通过`change`事件的回调函数来进行文件处理，如验证文件类型、大小限制，然后将文件数据发送到服务器。
### 示例代码解析
1. **HTML结构**
```html
<span class="up-btn" id="selectFile">请选择文件</span>
<input type="file" name="fileupload" style="FILTER:alpha(opacity=0);moz-opacity:0;opacity:0;"/>
```
- 这里定义了一个自定义按钮`span`和一个透明的`input:file`，隐藏起来。
2. **JavaScript处理**
```javascript
jQuery('#selectFile').live('click', function(){
var ie = !-[1,];
if(ie){
jQuery('input:file').trigger('click').trigger('change');
}else{
jQuery('input:file').trigger('click');
}
});
```
- 使用jQuery的`.live()`方法（尽管这个方法已经在新版本的jQuery中被废弃，推荐使用`.on()`方法替代）来监听自定义按钮的点击事件。
- 判断是否为旧版IE浏览器（如IE6,7），在旧浏览器中需要手动触发`change`事件。
3. **选中文件后的处理**
```javascript
jQuery('input:file').change(function(){
//dosomthing
});
```
- 这段代码用于处理文件选择后的逻辑。`dosomthing`是需要开发者根据实际需求编写代码的地方，比如校验文件大小、格式，然后执行上传操作等。
### 总结
通过上述的知识点和代码示例，我们可以看到，虽然文件上传是Web开发中一个基本功能，但是要实现一个兼容各种浏览器、安全可靠的文件上传功能，还是需要对HTML、CSS以及JavaScript有较深入的理解和处理。在实际开发过程中，还需要注意文件的验证、上传进度的提示、错误处理等用户体验方面的优化。
