把input type=file 上传文件的onchange调用方法参数用\"括起来后赋给div变乱而无响应

亮术网 2020-06-17 本网原创

用 input type=file 来上传文件需要借住 javascript 来完成,客户端的执行过程大概是这样:用户单击“浏览”选择待上传的文件后触发 input 的onchange事件,在onchange事件中调用一个方法,该方法负责把文件提交到服务器,由服务器来完成文件的上传。

这种方法上传文件每上传一次后需要重写 input type=file,这就涉及到把 input type=file 赋给其父,赋值过程中涉及三重字符串,即"第一层"第二层"第三层""",如果把第三层的字符串用转义字符\"括起来,则 input type=file 会变乱而无响应,而转为用单引号',则不会变乱。

 

一、把input type=file 上传文件的onchange调用方法参数用\"括起来后赋给div变乱而无响应实例

假如有 input type=file 如下:

<div id="divId"><input type="file" id="uploadImageId" name="uploadImageId" onchange="uploadImage(\"divId\")"/></div>

上传一次文件后重新把 input type=file 赋给div:

document.getElementById("divId").innerHTML = "<input type=\"file\" id=\"uploadImageId\" name=\"uploadImageId\"onchange=\"uploadImage(\"divId\")\" />";

赋给div 后变乱的 input type=file:

<input name="uploadImageId" id="uploadImageId" onchange="uploadImage(" type="file" divId")"="">

问题主要是 input 的 type=file 都跑到 onchange 调用方法的括号里变参数了,使得参数变乱而不执行 onchange 事件。

 

二、解决办法

解决办法非常简单,只需把参数的转义字符 \" 改为单引号'就不会再变乱,代码更改为:

document.getElementById("divId").innerHTML = "<input type=\"file\" id=\"uploadImageId\" name=\"uploadImageId\" onchange=\"uploadImage('divId')\" />";

其实就是不能用两次转义字符,即不允许出现转义字符括起来的字符串中又有转义字符括起来的字符串。