<input type="file"/>实现文件上传效果

      最近做商户平台，需求：点击上传按钮，文件上传并且在text文本框中显示上传文件的名称。

效果图如下：

HTML部分代码：

<div class="test2 txt-com">
    <input type="text" name="filetext1">
    <input id="myfile1" style="display: none" type="file" name="file"><!--定义文件选择字段和 "浏览..." 按钮，供文件上传。-->
    <label class="UpLoad" for="myfile1" >上传</label> 
    <div id="Prompt2" class="txt-com hint"><i>商户LOGO不能为空！</i></div><!--表单验证非空提示内容-->
</div>

JS代码部分：

/*file文件上传*/
$("#myfile1").change(function (event) {
    var name = event.target.value;
    $("input[name='filetext1']").val(name);
});

通过js 将 id="myfile1" 的input框的name给 name='filetext1的input框。