I'm always confused, so I'll summarize it.
<input type=file name=logo_image /> <!-- (1) -->
<figure id=thumb_logo_image><img/></figure> <!-- (2) -->
<input type=hidden name=remove_logo_image value=on /> <!-- (3) -->
<button id=btn_remove_logo_img /> <!-- (4)-->
――Suppose there is such an element
--If there is a saved file, the thumbnail will be displayed in (2).
--Suppose you set thumbnails in (2) with JS immediately after selecting a file.
-* Not sent to the server yet
--Suppose that the saved file can be deleted by setting the value to remove_attribute name
and sending it.
--It is assumed that even if you send a new file with the value in the delete field, it will be properly replaced with the new file.
-When the delete button of (4) is pressed, it is assumed that (2) thumbnail, (3) delete field, and (4) delete button disappear from HTML.
--Are there any saved files? --Whether a new file is selected or not --Whether you returned with the "Cancel" button after displaying the file selection dialog --Whether the delete button was pressed or not --Whether you selected the file again after the delete button was pressed --If you select a new file with a saved file, but cancel the new file
Object savedValue
--Saved fileString savedValueUrl
--URL for thumbnail of saved fileObject inputValue
--Newly selected file
-* (1) Value value of file field
-* Due to the specifications of the file field, it cannot be reset from JS and only reset (null substitution) is possible.String inputValueUrl
--URL for thumbnail of newly selected fileBool thumbVisible
-(2) Whether to display thumbnailsString thumbSrc
-(2) Value to be set in the thumb tag
savedValueUrl
or inputValueUrl
Bool readyToRemove
-(3) Whether to delete the saved fileBool removeBtnVisible
-(4) Whether to display the delete button--Assuming that operation check is completed by repeating reloading and operation for this number of lines
-* The cells null
and false
are omitted. Because it became hard to see
inputValue
-(2) .. thumbSrc
and thumbVisible
readyToRemove
removeBtnVisible
operation| (1) | (2) | (3) | (4) |
---|---|---|---|
initial state | |||
File selected | Object | inputValueUrl |
|
After selecting a file The delete button was pressed |
|||
After selecting a file The file selection was opened again Cancel was pressed |
operation| (1) | (2) | (3) | (4) |
---|---|---|---|
initial state | savedValueUrl |
||
The delete button was pressed | true | ||
File selected | Object | inputValueUrl |
|
The file selection was opened Cancel was pressed |
savedValueUrl |
||
From the Delete button is pressed File selected |
Object | inputValueUrl |
|
Since the file selection The delete button was pressed |
savedValueUrl |
||
After the file is selected The delete button is pressed The delete button was pressed again |
true | ||
After the file is selected The delete button is pressed The file selection was opened again Cancel was pressed |
savedValueUrl |
Ah confusing
Recommended Posts