使用javascript上传图片4

时间:2016-03-07 05:32:50

标签: javascript jquery

我有一个像这样的图片上传框,这是提交表单的一部分。

<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="{&quot;runtimes&quot;:&quot;html5,flash,html4&quot;,&quot;browse_button&quot;:&quot;gform_browse_button_1_14&quot;,&quot;container&quot;:&quot;gform_multifile_upload_1_14&quot;,&quot;drop_element&quot;:&quot;gform_drag_drop_area_1_14&quot;,&quot;filelist&quot;:&quot;gform_preview_1_14&quot;,&quot;unique_names&quot;:true,&quot;file_data_name&quot;:&quot;file&quot;,&quot;url&quot;:&quot;http:\/\/localhost\/?gf_page=5c28261389c3423&quot;,&quot;flash_swf_url&quot;:&quot;http:\/\/localhost\/wp-includes\/js\/plupload\/plupload.flash.swf&quot;,&quot;silverlight_xap_url&quot;:&quot;http:\/\/localhost\/wp-includes\/js\/plupload\/plupload.silverlight.xap&quot;,&quot;filters&quot;:{&quot;mime_types&quot;:[{&quot;title&quot;:&quot;Allowed Files&quot;,&quot;extensions&quot;:&quot;jpg,gif,png,pdf&quot;}],&quot;max_file_size&quot;:&quot;2097152b&quot;},&quot;multipart&quot;:true,&quot;urlstream_upload&quot;:false,&quot;multipart_params&quot;:{&quot;form_id&quot;:1,&quot;field_id&quot;:14,&quot;_gform_file_upload_nonce_1&quot;:&quot;8b58601a9a&quot;},&quot;gf_vars&quot;:{&quot;max_files&quot;:&quot;10&quot;,&quot;message_id&quot;:&quot;gform_multifile_messages_1_14&quot;,&quot;disallowed_extensions&quot;:[&quot;php&quot;,&quot;asp&quot;,&quot;aspx&quot;,&quot;cmd&quot;,&quot;csh&quot;,&quot;bat&quot;,&quot;html&quot;,&quot;hta&quot;,&quot;jar&quot;,&quot;exe&quot;,&quot;com&quot;,&quot;js&quot;,&quot;lnk&quot;,&quot;htaccess&quot;,&quot;phtml&quot;,&quot;ps1&quot;,&quot;ps2&quot;,&quot;php3&quot;,&quot;php4&quot;,&quot;php5&quot;,&quot;php6&quot;,&quot;py&quot;,&quot;rb&quot;,&quot;tmp&quot;]}}" 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="{&quot;runtimes&quot;:&quot;html5,flash,html4&quot;,&quot;browse_button&quot;:&quot;gform_browse_button_1_14&quot;,&quot;container&quot;:&quot;gform_multifile_upload_1_14&quot;,&quot;drop_element&quot;:&quot;gform_drag_drop_area_1_14&quot;,&quot;filelist&quot;:&quot;gform_preview_1_14&quot;,&quot;unique_names&quot;:true,&quot;file_data_name&quot;:&quot;file&quot;,&quot;url&quot;:&quot;http:\/\/localhost\/?gf_page=5c28261389c3423&quot;,&quot;flash_swf_url&quot;:&quot;http:\/\/localhost\/wp-includes\/js\/plupload\/plupload.flash.swf&quot;,&quot;silverlight_xap_url&quot;:&quot;http:\/\/localhost\/wp-includes\/js\/plupload\/plupload.silverlight.xap&quot;,&quot;filters&quot;:{&quot;mime_types&quot;:[{&quot;title&quot;:&quot;Allowed Files&quot;,&quot;extensions&quot;:&quot;jpg,gif,png,pdf&quot;}],&quot;max_file_size&quot;:&quot;2097152b&quot;},&quot;multipart&quot;:true,&quot;urlstream_upload&quot;:false,&quot;multipart_params&quot;:{&quot;form_id&quot;:1,&quot;field_id&quot;:14,&quot;_gform_file_upload_nonce_1&quot;:&quot;8b58601a9a&quot;},&quot;gf_vars&quot;:{&quot;max_files&quot;:&quot;10&quot;,&quot;message_id&quot;:&quot;gform_multifile_messages_1_14&quot;,&quot;disallowed_extensions&quot;:[&quot;php&quot;,&quot;asp&quot;,&quot;aspx&quot;,&quot;cmd&quot;,&quot;csh&quot;,&quot;bat&quot;,&quot;html&quot;,&quot;hta&quot;,&quot;jar&quot;,&quot;exe&quot;,&quot;com&quot;,&quot;js&quot;,&quot;lnk&quot;,&quot;htaccess&quot;,&quot;phtml&quot;,&quot;ps1&quot;,&quot;ps2&quot;,&quot;php3&quot;,&quot;php4&quot;,&quot;php5&quot;,&quot;php6&quot;,&quot;py&quot;,&quot;rb&quot;,&quot;tmp&quot;]}}" 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="{&quot;input_14&quot;:[{&quot;temp_filename&quot;:&quot;ff301078_input_14_o_1ad7pjak2psd8g4fhpi71ajia.jpg&quot;,&quot;uploaded_filename&quot;:&quot;test.jpg&quot;}]}">

我希望:

而不是让用户像上面那样上传图片
  1. 使用CSS隐藏图片上传框(完成!)
  2. 使用javascript将“http://localhost/wp-content/uploads/2015/11/myimage.jpg”上传到该图片框。
  3. myimage.jpg已经在服务器上,可以公开访问。

    有人可以帮我做第(2)步吗?

    因此,当用户点击表单提交按钮时,用户实际提交的图像是myimage.jpg。

    感谢。

1 个答案:

答案 0 :(得分:1)

如果你想要的只是以编程方式将图像设置到框中而不是让用户上传它。然后你可以使用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.