使用javascript 4上传图片
[英]Upload image using javascript 4
问题描述
我有一个这样的图像上传框，它是提交表单的一部分。
<li id="field_1_14" class="gfield field_sublabel_below field_description_above"><label class="gfield_label">Ảnh</label><div class="gfield_description">Ảnh hàng hóa bạn muốn mua hộ</div><div class="ginput_container ginput_container_fileupload"><div id="gform_multifile_upload_1_14" data-settings="{"runtimes":"html5,flash,html4","browse_button":"gform_browse_button_1_14","container":"gform_multifile_upload_1_14","drop_element":"gform_drag_drop_area_1_14","filelist":"gform_preview_1_14","unique_names":true,"file_data_name":"file","url":"http:\/\/localhost\/?gf_page=5c28261389c3423","flash_swf_url":"http:\/\/localhost\/wp-includes\/js\/plupload\/plupload.flash.swf","silverlight_xap_url":"http:\/\/localhost\/wp-includes\/js\/plupload\/plupload.silverlight.xap","filters":{"mime_types":[{"title":"Allowed Files","extensions":"jpg,gif,png,pdf"}],"max_file_size":"2097152b"},"multipart":true,"urlstream_upload":false,"multipart_params":{"form_id":1,"field_id":14,"_gform_file_upload_nonce_1":"8b58601a9a"},"gf_vars":{"max_files":"10","message_id":"gform_multifile_messages_1_14","disallowed_extensions":["php","asp","aspx","cmd","csh","bat","html","hta","jar","exe","com","js","lnk","htaccess","phtml","ps1","ps2","php3","php4","php5","php6","py","rb","tmp"]}}" class="gform_fileupload_multifile" style="position: relative;">
<div id="gform_drag_drop_area_1_14" class="gform_drop_area" style="position: relative;">
<span class="gform_drop_instructions">Drop files here or </span>
<input id="gform_browse_button_1_14" type="button" value="Select files" class="button gform_button_select_files" aria-describedby="extensions_message" tabindex="4" style="z-index: 1;">
</div>
<div id="html5_1ad7o2aq0k8310031upe1gkr1lqf3_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 27px; left: 550px; width: 136px; height: 34px; overflow: hidden; z-index: 0;"><input id="html5_1ad7o2aq0k8310031upe1gkr1lqf3" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="image/jpeg,.jpg,image/gif,.gif,image/png,.png,application/pdf,.pdf"></div></div><span id="extensions_message" class="screen-reader-text">Accepted file types: jpg, gif, png, pdf.</span><div class="validation_message">
<ul id="gform_multifile_messages_1_14">
</ul>
</div></div><div id="gform_preview_1_14"></div></li>
当用户通过拖放操作上传图像test.png或从计算机中选择图像时，它将图像上传到服务器，图像上传框变成这样
<li id="field_1_14" class="gfield field_sublabel_below field_description_above"><label class="gfield_label">Ảnh</label><div class="gfield_description">Ảnh hàng hóa bạn muốn mua hộ</div><div class="ginput_container ginput_container_fileupload"><div id="gform_multifile_upload_1_14" data-settings="{"runtimes":"html5,flash,html4","browse_button":"gform_browse_button_1_14","container":"gform_multifile_upload_1_14","drop_element":"gform_drag_drop_area_1_14","filelist":"gform_preview_1_14","unique_names":true,"file_data_name":"file","url":"http:\/\/localhost\/?gf_page=5c28261389c3423","flash_swf_url":"http:\/\/localhost\/wp-includes\/js\/plupload\/plupload.flash.swf","silverlight_xap_url":"http:\/\/localhost\/wp-includes\/js\/plupload\/plupload.silverlight.xap","filters":{"mime_types":[{"title":"Allowed Files","extensions":"jpg,gif,png,pdf"}],"max_file_size":"2097152b"},"multipart":true,"urlstream_upload":false,"multipart_params":{"form_id":1,"field_id":14,"_gform_file_upload_nonce_1":"8b58601a9a"},"gf_vars":{"max_files":"10","message_id":"gform_multifile_messages_1_14","disallowed_extensions":["php","asp","aspx","cmd","csh","bat","html","hta","jar","exe","com","js","lnk","htaccess","phtml","ps1","ps2","php3","php4","php5","php6","py","rb","tmp"]}}" class="gform_fileupload_multifile" style="position: relative;">
<div id="gform_drag_drop_area_1_14" class="gform_drop_area" style="position: relative;">
<span class="gform_drop_instructions">Drop files here or </span>
<input id="gform_browse_button_1_14" type="button" value="Select files" class="button gform_button_select_files" aria-describedby="extensions_message" tabindex="4" style="z-index: 1;">
</div>
<div id="html5_1ad7o2aq0k8310031upe1gkr1lqf3_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 25px; left: 186px; width: 136px; height: 34px; overflow: hidden; z-index: 0;"><input id="html5_1ad7o2aq0k8310031upe1gkr1lqf3" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="image/jpeg,.jpg,image/gif,.gif,image/png,.png,application/pdf,.pdf"></div></div><span id="extensions_message" class="screen-reader-text">Accepted file types: jpg, gif, png, pdf.</span><div class="validation_message">
<ul id="gform_multifile_messages_1_14"></ul>
</div></div><div id="gform_preview_1_14"><div id="o_1ad7oetmvfm31gsd11lhsoc1s88f" class="ginput_preview"><img class="gform_delete" src="http://localhost/wp-content/plugins/gravityforms/images/delete.png" onclick="gformDeleteUploadedFile(1,14, this);" alt="Delete this file" title="Delete this file" scale="0"> <strong>test.jpg</strong></div></div></li>
我在提交按钮上方的表单提交中找到了这部分代码
<input type="hidden" name="gform_uploaded_files" id="gform_uploaded_files_1" value="{"input_14":[{"temp_filename":"ff301078_input_14_o_1ad7pjak2psd8g4fhpi71ajia.jpg","uploaded_filename":"test.jpg"}]}">
与其让用户上传上述图片，不如：
- 使用CSS隐藏图片上传框（完成！）
- 使用javascript将“ http：//localhost/wp-content/uploads/2015/11/myimage.jpg ”上传到该图像框。
myimage.jpg已经在服务器上并且可以公开访问。
有人可以帮我做第二步吗？
结果，当用户单击表单提交按钮时，用户实际提交的图像是myimage.jpg。
谢谢。
1 个解决方案
解决方案1
1 2016-03-07 05:42:02
如果只需要以编程方式将图像设置到框上，则不要让用户上传它。 然后，您可以只使用Jquery并设置图像的src 。
var imageSrc = "http://localhost/wp-content/uploads/2015/11/myimage.jpg";
var imageHolder = '<img class="gform_delete" src="'+ imageSrc +'" alt="Delete this file" title="Delete this file" scale="0"><strong>test.jpg</strong>';
$('#gform_preview_1_14').append(imageHolder); // once you append the HTML image will be accessed from the server and loaded.
使用javascript上传图片
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.