Select a image to be uploaded from URL with jQuery-CodePudding

I just need the selected file to be the URL so when I press suit would be the URL content.

<form method="POST" action="index.php" enctype="multipart/form-data" >
   <input type="file" name="file" id="file">
   <input type="submit" value="submit"  name="submit">
</form>

CodePudding user response：

Pre-selection is not possible with type file, You can use some plugins like http://blueimp.github.io/jQuery-File-Upload/ or you can use something like this

*{margin:0;box-sizing:border-box;}
input, textarea{font:14px/1.4 sans-serif;}

.input-group{
  display: table;
  border-collapse: collapse;
  width:100%;
}
.input-group > label,.input-group > div{
  display: table-cell;
  border: 1px solid #ddd;
  vertical-align: middle;  /* needed for Safari */
}
.input-group-icon{
  background:#eee;
  color: #777;
  padding: 0 12px
}
.input-group-area{
  width:100%;
}
.input-group input{
  border: 0;
  display: block;
  width: 100%;
  padding: 8px;
}

<div >
  <label  for="file">browse...</label>
  <div ><input type="text" id="preview" placeholder="No file selected..." readonly value="my_drafted_image.png"></div>
       <input type="file" id="file" onchange="document.getElementById('preview').value = this.files.item(0).name" style="display:none">
</div>